Updated datatables, using @pa instead of @js/@css, using conditionalPaging in datatables

2024-07-28 21:33:30 +10:00
parent 1c4cb6f38c
commit 5f10175b35
18 changed files with 230 additions and 670 deletions
--- a/resources/views/theme/backend/adminlte/account/widget/admin/list.blade.php
+++ b/resources/views/theme/backend/adminlte/account/widget/admin/list.blade.php
@@ -1,16 +1,16 @@
 <div class="card card-dark">
-	<div class="card-header">
+	<div class="card-header p-2">
 		<h4 class="card-title">Accounts</h4>
 	</div>

-	<div class="card-body">
+	<div class="card-body p-2">
 		@if($x=$o->accounts_all->count())
-			<table class="table table-striped table-hover" id="accounts">
+			<table class="table table-sm table-striped table-hover" id="accounts">
 				<thead>
 				<tr>
-					<th>Profile</th>
+					<th style="width: 10%;">Profile</th>
 					<th>Name</th>
-					<th class="text-right">Services</th>
+					<th class="text-right" style="width: 10%;">Services</th>
 				</tr>
 				</thead>
 				<tbody>
@@ -40,15 +40,13 @@
 	</div>
 </div>

-@section('page-styles')
-	@css(datatables,bootstrap4)
-@append
-@section('page-scripts')
-	@js(datatables,bootstrap4)
+@pa(datatables,rowgroup|conditionalpaging)

+@section('page-scripts')
 	<script type="text/javascript">
 		$(document).ready(function() {
 			$('#accounts').DataTable({
+				conditionalPaging: true,
 				language: {
 					emptyTable: "No Active Clients"
 				},
--- a/resources/views/theme/backend/adminlte/account/widget/invoice_due.blade.php
+++ b/resources/views/theme/backend/adminlte/account/widget/invoice_due.blade.php
@@ -1,16 +1,16 @@
 <!-- $o=Account::class -->
 <!-- Show outstanding invoices -->
 <div class="card card-warning">
-	<div class="card-header">
+	<div class="card-header p-2">
 		<h3 class="card-title">Invoices Due</h3>
 	</div>

-	<div class="card-body">
+	<div class="card-body p-2">
 		@if(($list=$o->invoiceSummaryDue()->get())->count())
-			@include('theme.backend.adminlte.invoice.widget.due',['type'=>'account'])
+			@include('theme.backend.adminlte.invoice.widget.due',['type'=>'account','list'=>$list])

 		@else
-			<p>No invoice due</p>
+			<p>No invoices to list</p>
 		@endif
 	</div>
 </div>
--- a/resources/views/theme/backend/adminlte/account/widget/invoice_past.blade.php
+++ b/resources/views/theme/backend/adminlte/account/widget/invoice_past.blade.php
@@ -1,13 +1,13 @@
 <!-- $o=Account::class -->
 <!-- Show past 12 months invoices -->
 <div class="card card-success">
-	<div class="card-header">
+	<div class="card-header p-2">
 		<h3 class="card-title">Past Invoices</h3>
 	</div>

-	<div class="card-body">
+	<div class="card-body p-2">
 		@if(($list=$o->invoiceSummaryPast()->where('invoices.created_at','>=',\Carbon\Carbon::now()->subYears(2)->startOfYear())->get())->count())
-			<table class="table table-bordered w-100" id="invoices_past_{{ $o->id }}">
+			<table class="table table-sm table-striped" id="invoices_past_{{ $o->id }}">
 				<thead>
 				<tr>
 					<th>Account</th>
@@ -37,16 +37,14 @@
 	</div>
 </div>

-@section('page-styles')
-	@css(datatables,bootstrap4|rowgroup)
-@append
-@section('page-scripts')
-	@js(datatables,bootstrap4|rowgroup)
+@pa(datatables,rowgroup|conditionalpaging)

+@section('page-scripts')
 	<script type="text/javascript">
 		@if($list->count())
 			$(document).ready(function() {
 				$('#invoices_past_{{ $o->id }}').DataTable({
+					conditionalPaging: true,
 					order: [[2,'desc'],[0,'asc']],
 					rowGroup: {
 						dataSrc: 0,
--- a/resources/views/theme/backend/adminlte/account/widget/service_active.blade.php
+++ b/resources/views/theme/backend/adminlte/account/widget/service_active.blade.php
@@ -1,17 +1,15 @@
 <!-- $o=Account::class -->
-@php
-	$o->load(['services_active.invoiced_service_items_active_recent']);
-@endphp
+@php($o->load(['services_active.invoiced_service_items_active_recent']))

 <!-- Show active services -->
 <div class="card card-light">
-	<div class="card-header">
+	<div class="card-header p-2">
 		<h3 class="card-title">Active Services</h3>
 	</div>

-	<div class="card-body">
+	<div class="card-body p-2">
 		@if(($x=$o->services_active)->count())
-			<table class="table table-striped table-hover w-100" id="services_active_{{ $ao->id }}">
+			<table class="table table-sm table-striped table-hover" id="services_active_{{ $ao->id }}">
 				<thead>
 				<tr>
 					<th>ID</th>
@@ -47,29 +45,29 @@
 	</div>
 </div>

-@section('page-styles')
-	@css(datatables,bootstrap4|rowgroup)
-@append
-@section('page-scripts')
-	@js(datatables,bootstrap4|rowgroup)
+@pa(datatables,rowgroup|conditionalpaging)

+@section('page-scripts')
 	<script type="text/javascript">
 		$(document).ready(function() {
-			$('#services_active_{{ $ao->id }}').DataTable({
-				order: [[1,'asc'],[2,'asc']],
-				rowGroup: {
-					dataSrc: 1,
-					endRender: function ( rows, group ) {
-						return rows.count()+' x ' + group;
+			@if($x->count())
+				$('#services_active_{{ $ao->id }}').DataTable({
+					conditionalPaging: true,
+					order: [[1,'asc'],[2,'asc']],
+					rowGroup: {
+						dataSrc: 1,
+						endRender: function (rows,group) {
+							return rows.count()+' x '+group;
+						},
 					},
-				},
-				columnDefs: [
-					{
-						targets: [1],
-						visible: false,
-					},
-				],
-			});
+					columnDefs: [
+						{
+							targets: [1],
+							visible: false,
+						},
+					],
+				});
+			@endif
 		});
 	</script>
@append
--- a/resources/views/theme/backend/adminlte/invoice/widget/admin/credit.blade.php
+++ b/resources/views/theme/backend/adminlte/invoice/widget/admin/credit.blade.php
@@ -1,57 +1,59 @@
 <!-- Show outstanding invoices -->
-<table class="table table-bordered w-100" id="invoices_credit_{{$type}}">
-	<thead>
-	<tr>
-		<th>Account</th>
-		<th>#</th>
-		<th>Due</th>
-		<th class="text-right">Items</th>
-		<th class="text-right">Discounts</th>
-		<th class="text-right">Total</th>
-		<th class="text-right">Payments</th>
-		<th class="text-right">Balance</th>
-	</tr>
-	</thead>
-
-	<tbody>
-	@foreach($list as $oo)
+@if($list->count())
+	<table class="table table-bordered table-striped" id="invoices_credit_{{$type}}">
+		<thead>
 		<tr>
-			<td>{{ $oo->account->name }}</td>
-			<td><a href="{{ url('u/invoice',$oo->id) }}">{{ $oo->lid }}</a></td>
-			<td>{{ $oo->due_at->format('Y-m-d') }}</td>
-			<td class="text-right">${{ number_format($oo->_item+$oo->_tax,2) }}</td>
-			<td class="text-right">${{ number_format($oo->_discount,2) }}</td>
-			<td class="text-right">${{ number_format($oo->_total,2) }}</td>
-			<td class="text-right">${{ number_format($oo->_payment,2) }}</td>
-			<td class="text-right">${{ number_format($oo->_balance,2) }}</td>
+			<th>Account</th>
+			<th>#</th>
+			<th>Due</th>
+			<th class="text-right">Items</th>
+			<th class="text-right">Discounts</th>
+			<th class="text-right">Total</th>
+			<th class="text-right">Payments</th>
+			<th class="text-right">Balance</th>
 		</tr>
-	@endforeach
-	</tbody>
-</table>
+		</thead>
+
+		<tbody>
+		@foreach($list as $oo)
+			<tr>
+				<td>{{ $oo->account->name }}</td>
+				<td><a href="{{ url('u/invoice',$oo->id) }}">{{ $oo->lid }}</a></td>
+				<td>{{ $oo->due_at->format('Y-m-d') }}</td>
+				<td class="text-right">${{ number_format($oo->_item+$oo->_tax,2) }}</td>
+				<td class="text-right">${{ number_format($oo->_discount,2) }}</td>
+				<td class="text-right">${{ number_format($oo->_total,2) }}</td>
+				<td class="text-right">${{ number_format($oo->_payment,2) }}</td>
+				<td class="text-right">${{ number_format($oo->_balance,2) }}</td>
+			</tr>
+		@endforeach
+		</tbody>
+	</table>
+@else
+	<p>No invoices to list</p>
+@endif
+
+@pa(datatables,rowgroup|conditionalpaging)

-@section('page-styles')
-	@css(datatables,bootstrap4|rowgroup)
-@append
@section('page-scripts')
-	@js(datatables,bootstrap4|rowgroup)
-
 	<script type="text/javascript">
 		@if($list->count())
-		$(document).ready(function() {
-			$('#invoices_credit_{{$type}}').DataTable({
-				// If we have more than 1 account id, order by account
-				order: [[0,'asc'],[2,'asc'],[1,'desc']],
-				rowGroup: {
-					dataSrc: 0,
-				},
-				columnDefs: [
-					{
-						targets: [0],
-						visible: false,
-					}
-				],
+			$(document).ready(function() {
+				$('#invoices_credit_{{$type}}').DataTable({
+					conditionalPaging: true,
+					// If we have more than 1 account id, order by account
+					order: [[0,'asc'],[2,'asc'],[1,'desc']],
+					rowGroup: {
+						dataSrc: 0,
+					},
+					columnDefs: [
+						{
+							targets: [0],
+							visible: false,
+						}
+					],
+				});
 			});
-		});
 		@endif
 	</script>
@append
--- a/resources/views/theme/backend/adminlte/invoice/widget/admin/due.blade.php
+++ b/resources/views/theme/backend/adminlte/invoice/widget/admin/due.blade.php
@@ -1,15 +1,16 @@
+@use(App\Models\Account)
 <!-- Show outstanding invoices for all clients -->
 <div class="card card-warning">
-	<div class="card-header">
+	<div class="card-header p-2">
 		<h3 class="card-title">Invoices Due</h3>
 	</div>

-	<div class="card-body">
-		@if(($list=\App\Models\Account::InvoicesDue())->count())
-			@include('theme.backend.adminlte.invoice.widget.due',['type'=>'all'])
+	<div class="card-body p-2">
+		@if(($list=Account::InvoicesDue())->count())
+			@include('theme.backend.adminlte.invoice.widget.due',['type'=>'all','list'=>$list])

 		@else
-			<p>No invoice due</p>
+			<p>No invoices to list</p>
 		@endif
 	</div>
 </div>
--- a/resources/views/theme/backend/adminlte/invoice/widget/due.blade.php
+++ b/resources/views/theme/backend/adminlte/invoice/widget/due.blade.php
@@ -1,6 +1,6 @@
 <!-- $list=Collection[Invoice::class] -->
 <!-- Show outstanding invoices -->
-<table class="table table-bordered w-100" id="invoices_due_{{$type}}">
+<table class="table table-sm table-striped" id="invoices_due_{{$type}}">
 	<thead>
 	<tr>
 		<th>Account</th>
@@ -24,29 +24,27 @@
 	</tbody>
 </table>

-@section('page-styles')
-	@css(datatables,bootstrap4|rowgroup)
-@append
-@section('page-scripts')
-	@js(datatables,bootstrap4|rowgroup)
+@pa(datatables,rowgroup|conditionalpaging)

+@section('page-scripts')
 	<script type="text/javascript">
 		@if($list->count())
-		$(document).ready(function() {
-			$('#invoices_due_{{$type}}').DataTable({
-				// If we have more than 1 account id, order by account
-				order: [[0,'asc'],[2,'asc'],[1,'desc']],
-				rowGroup: {
-					dataSrc: 0,
-				},
-				columnDefs: [
-					{
-						targets: [0],
-						visible: false,
-					}
-				],
+			$(document).ready(function() {
+				$('#invoices_due_{{$type}}').DataTable({
+					conditionalPaging: true,
+					// If we have more than 1 account id, order by account
+					order: [[0,'asc'],[2,'asc'],[1,'desc']],
+					rowGroup: {
+						dataSrc: 0,
+					},
+					columnDefs: [
+						{
+							targets: [0],
+							visible: false,
+						}
+					],
+				});
 			});
-		});
 		@endif
 	</script>
@append
--- a/resources/views/theme/backend/adminlte/service/home.blade.php
+++ b/resources/views/theme/backend/adminlte/service/home.blade.php
@@ -62,7 +62,7 @@
 					@endcan
 				</div>

-				<div class="card-body pt-2 pl-2 pr-2 pb-0">
+				<div class="card-body p-2">
 					<div class="tab-content">
 						@if($x=! ($o->suspend_billing || $o->external_billing))
 							<div @class(['tab-pane','fade','show active'=>! (session()->has('service_update') || session()->has('charge_add'))]) id="pending_items">
--- a/resources/views/theme/backend/adminlte/service/widget/admin/movement.blade.php
+++ b/resources/views/theme/backend/adminlte/service/widget/admin/movement.blade.php
@@ -1,13 +1,13 @@
@use(App\Models\Service)
 <!-- Show client movements -->
 <div class="card card-dark">
-	<div class="card-header">
+	<div class="card-header p-2">
 		<h3 class="card-title">Service Movements</h3>
 	</div>

-	<div class="card-body">
+	<div class="card-body p-2">
 		@if(($x=Service::movements($user))->count())
-			<table class="table table-striped table-hover" id="service_movements">
+			<table class="table table-sm table-striped table-hover" id="service_movements">
 				<thead>
 				<tr>
 					<th>ID</th>
@@ -56,15 +56,13 @@
 	</div>
 </div>

-@section('page-styles')
-	@css(datatables,bootstrap4|rowgroup)
-@append
-@section('page-scripts')
-	@js(datatables,bootstrap4|rowgroup)
+@pa(datatables,rowgroup|conditionalpaging)

+@section('page-scripts')
 	<script type="text/javascript">
 		$(document).ready(function() {
-			$('#service_movements').DataTable( {
+			$('#service_movements').DataTable({
+				conditionalPaging: true,
 				order: [3, 'asc'],
 				rowGroup: {
 					dataSrc: 1,
--- a/resources/views/theme/backend/adminlte/service/widget/billinghistory.blade.php
+++ b/resources/views/theme/backend/adminlte/service/widget/billinghistory.blade.php
@@ -1,5 +1,5 @@
 <!-- $o=Service::class -->
-<table class="table table-sm" id="svc_bill_hist">
+<table class="table table-sm table-striped" id="svc_bill_hist">
 	<thead>
 		<tr>
 			<th>Invoice</th>
@@ -25,15 +25,13 @@
 	</tbody>
 </table>

-@section('page-styles')
-	@css(datatables,bootstrap4)
-@append
-@section('page-scripts')
-	@js(datatables,bootstrap4)
+@pa(datatables,conditionalpaging)

+@section('page-scripts')
 	<script type="text/javascript">
 		$(document).ready(function() {
 			$('#svc_bill_hist').DataTable({
+				conditionalPaging: true,
 				language: {
 					emptyTable: "No Invoices"
 				},
--- a/resources/views/theme/backend/adminlte/widget/admin/reseller.blade.php
+++ b/resources/views/theme/backend/adminlte/widget/admin/reseller.blade.php
@@ -1,24 +1,32 @@
+@use(App\Models\Account)
+
 <div class="row">
-	<div class="col-4">
+	<div class="col-12 col-md-4">
 		@include('theme.backend.adminlte.account.widget.admin.list')
 	</div>

-	<div class="col-8">
+	<div class="col-12 col-md-8">
 		@include('theme.backend.adminlte.service.widget.admin.movement')

-		@include('theme.backend.adminlte.invoice.widget.admin.due')
-
-		@can('wholesaler')
-			<!-- Show outstanding invoices for all clients -->
-			<div class="card card-secondary">
-				<div class="card-header">
-					<h3 class="card-title">Invoices In Credit</h3>
-				</div>
-
-				<div class="card-body">
-					@include('theme.backend.adminlte.invoice.widget.admin.credit',['list'=>\App\Models\Account::InvoicesCredit(),'type'=>'account'])
-				</div>
+		<div class="row">
+			<div class="col-12 col-xl-6">
+				@include('theme.backend.adminlte.invoice.widget.admin.due')
 			</div>
-		@endcan
+
+			<div class="col-12 col-xl-6">
+				@can('wholesaler')
+					<!-- Show outstanding invoices for all clients -->
+					<div class="card card-secondary">
+						<div class="card-header p-2">
+							<h3 class="card-title">Invoices In Credit</h3>
+						</div>
+
+						<div class="card-body p-2">
+							@include('theme.backend.adminlte.invoice.widget.admin.credit',['list'=>Account::InvoicesCredit(),'type'=>'account'])
+						</div>
+					</div>
+				@endcan
+			</div>
+		</div>
 	</div>
 </div>