Skip to content

Commit

Permalink
Components + Handle large table url
Browse files Browse the repository at this point in the history
  • Loading branch information
rxcod9 committed Dec 19, 2022
1 parent 7ed1412 commit 842e77e
Show file tree
Hide file tree
Showing 7 changed files with 470 additions and 106 deletions.
115 changes: 9 additions & 106 deletions resources/views/bread/datatable.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
@endcan
@can('delete', app($dataType->model_name))
@if($usesSoftDeletes)
<input type="checkbox" @if ($showSoftDeleted) checked @endif id="show_soft_deletes" data-toggle="toggle" data-on="{{ __('voyager::bread.soft_deletes_off') }}" data-off="{{ __('voyager::bread.soft_deletes_on') }}">
<input type="checkbox" @if ($showSoftDeleted) checked @endif class="show_soft_deletes" data-toggle="toggle" data-on="{{ __('voyager::bread.soft_deletes_off') }}" data-off="{{ __('voyager::bread.soft_deletes_on') }}">
@endif
@endcan
@foreach($actions as $action)
Expand All @@ -41,54 +41,10 @@
@include('voyager::alerts')
<div class="row">
<div class="col-md-12">
<div class="panel panel-bordered">
<div class="panel-body">
<div class="table-responsive">
<table id="dataTable" class="table table-hover table-responsive">
<thead>
<tr>
@if($showCheckboxColumn)
<th class="dt-not-orderable">
<input type="checkbox" class="select_all">
</th>
@endif
@foreach($dataType->browseRows as $row)
<th>
{{ $row->getTranslatedAttribute('display_name') }}
</th>
@endforeach
<th class="actions text-right dt-not-orderable">{{ __('voyager::generic.actions') }}</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<x-joy-voyager-datatable :slug="$dataType->slug" />
</div>
</div>
</div>

{{-- Single delete modal --}}
<div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"><i class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}?</h4>
</div>
<div class="modal-footer">
<form action="#" id="delete_form" method="POST">
{{ method_field('DELETE') }}
{{ csrf_field() }}
<input type="submit" class="btn btn-danger pull-right delete-confirm" value="{{ __('voyager::generic.delete_confirm') }}">
</form>
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@stop

@section('css')
Expand All @@ -105,86 +61,33 @@
<script>
$(document).ready(function () {
var options = {!! json_encode(
array_merge([
"order" => $orderColumn,
"language" => __('voyager::datatable'),
"columnDefs" => [
['targets' => 'dt-not-orderable', 'searchable' => false, 'orderable' => false],
],
"processing" => true,
"serverSide" => true,
"ajax" => route('voyager.'.$dataType->slug.'.ajax', ['showSoftDeleted' => $showSoftDeleted]),
"columns" => \dataTypeTableColumns($dataType, $showCheckboxColumn),
],
config('voyager.dashboard.data_tables', []))
, true) !!};
options = $.extend(
options,
{
"drawCallback": function( settings ) {
$('.select_all').off('click');
$('.select_all').on('click', function(e) {
console.log('clicked');
e.stopPropagation();
$('input[name="row_id"]').prop('checked', $(this).prop('checked')).trigger('change');
});
}
}
);
var table = $('#dataTable').DataTable(options);
@if ($isModelTranslatable)
$('.side-body').multilingual();
//Reinitialise the multilingual features when they change tab
$('#dataTable').on('draw.dt', function(){
$('#wrapper #dataTable').on('draw.dt', function(){
$('.side-body').data('multilingual').init();
})
@endif
$('.select_all').off('click');
$('.select_all').on('click', function(e) {
console.log('clicked');
e.stopPropagation();
$('input[name="row_id"]').prop('checked', $(this).prop('checked')).trigger('change');
});
});
var deleteFormAction;
$('#dataTable').on('click', 'td .delete', function (e) {
$('#delete_form')[0].action = '{{ route('voyager.'.$dataType->slug.'.destroy', '__id') }}'.replace('__id', $(this).data('id'));
$('#delete_modal').modal('show');
});
@if($usesSoftDeletes)
@php
$params = [
'order_by' => $orderBy,
'sort_order' => $sortOrder,
// 'order_by' => $orderBy,
// 'sort_order' => $sortOrder,
];
@endphp
$(function() {
$('#show_soft_deletes').change(function() {
$('.show_soft_deletes').change(function() {
if ($(this).prop('checked')) {
$('#dataTable').before('<a id="redir" href="{{ (route('voyager.'.$dataType->slug.'.index', array_merge($params, ['showSoftDeleted' => 1]), true)) }}"></a>');
$('#wrapper #dataTable').before('<a class="redir" href="{{ (route('voyager.'.$dataType->slug.'.index', array_merge($params, ['showSoftDeleted' => 1]), true)) }}"></a>');
}else{
$('#dataTable').before('<a id="redir" href="{{ (route('voyager.'.$dataType->slug.'.index', array_merge($params, ['showSoftDeleted' => 0]), true)) }}"></a>');
$('#wrapper #dataTable').before('<a class="redir" href="{{ (route('voyager.'.$dataType->slug.'.index', array_merge($params, ['showSoftDeleted' => 0]), true)) }}"></a>');
}
$('#redir')[0].click();
$('.redir')[0].click();
})
})
@endif
$('#dataTable').on('change', 'input[name="row_id"]', function (e) {
var ids = [];
$('input[name="row_id"]').each(function() {
if ($(this).is(':checked')) {
ids.push($(this).val());
}
});
$('.selected_ids').val(ids);
});
</script>
@stop
126 changes: 126 additions & 0 deletions resources/views/components/datatable.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
@php
$columnDefs = [
['targets' => 'dt-not-orderable', 'searchable' => false, 'orderable' => false],
];
if($withoutCheckbox) {
array_push($columnDefs, ['targets' => 'dt-index', 'visible' => false]);
}
if($withoutActions) {
array_push($columnDefs, ['targets' => 'dt-actions', 'visible' => false]);
}
@endphp
<div id="wrapper{{ $dataId }}" class="panel panel-bordered">
@if($withLabel)
<div class="panel-header">
<h1 class="page-title">
<i class="{{ $dataType->icon }}"></i> {{ $dataType->getTranslatedAttribute('display_name_plural') }}
</h1>
</div>
@endif
<div class="panel-body">
<div class="table-responsive">
<table id="dataTable{{ $dataId }}" class="table table-sm">
<thead>
<tr>
@if($showCheckboxColumn)
<th class="dt-not-orderable dt-index">
<input type="checkbox" class="select_all">
</th>
@endif
@foreach($dataType->browseRows as $row)
<th class="dt-col-{{ $row->field }}">
{{ $row->getTranslatedAttribute('display_name') }}
</th>
@endforeach
<th class="actions text-right dt-not-orderable dt-actions">{{ __('voyager::generic.actions') }}</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>

@push('javascript')

{{-- Single delete modal --}}
<div id="modal-wrapper{{ $dataId }}" class="modal modal-danger fade delete_modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"><i class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}?</h4>
</div>
<div class="modal-footer">
<form action="#" class="delete_form" method="POST">
{{ method_field('DELETE') }}
{{ csrf_field() }}
<input type="submit" class="btn btn-danger pull-right delete-confirm" value="{{ __('voyager::generic.delete_confirm') }}">
</form>
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
$(document).ready(function () {
var options = {!! json_encode(
array_merge([
"order" => $orderColumn,
"language" => __('voyager::datatable'),
"columnDefs" => $columnDefs,
"processing" => true,
"serverSide" => true,
"ajax" => [
'url' => route('voyager.'.$dataType->slug.'.post-ajax', ['showSoftDeleted' => $showSoftDeleted]),
'type' => 'POST',
],
"columns" => \dataTypeTableColumns($dataType, $showCheckboxColumn),
],
config('voyager.dashboard.data_tables', []))
, true) !!};
options = $.extend(
options,
{
"drawCallback": function( settings ) {
$('#wrapper{{ $dataId }} .select_all').off('click');
$('#wrapper{{ $dataId }} .select_all').on('click', function(e) {
console.log('clicked');
e.stopPropagation();
$('#wrapper{{ $dataId }} input[name="row_id"]').prop('checked', $(this).prop('checked')).trigger('change');
});
}
}
);
var table = $('#wrapper{{ $dataId }} #dataTable{{ $dataId }}').DataTable(options);
$('#wrapper{{ $dataId }} .select_all').off('click');
$('#wrapper{{ $dataId }} .select_all').on('click', function(e) {
console.log('clicked');
e.stopPropagation();
$('#wrapper{{ $dataId }} input[name="row_id"]').prop('checked', $(this).prop('checked')).trigger('change');
});
});
var deleteFormAction;
$('#wrapper{{ $dataId }} #dataTable{{ $dataId }}').on('click', 'td .delete', function (e) {
$('#modal-wrapper{{ $dataId }} .delete_form')[0].action = '{{ route('voyager.'.$dataType->slug.'.destroy', '__id') }}'.replace('__id', $(this).data('id'));
$('#modal-wrapper{{ $dataId }}.delete_modal').modal('show');
});
$('#wrapper{{ $dataId }} #dataTable{{ $dataId }}').on('change', 'input[name="row_id"]', function (e) {
var ids = [];
$('#wrapper{{ $dataId }} input[name="row_id"]').each(function() {
if ($(this).is(':checked')) {
ids.push($(this).val());
}
});
$('.selected_ids').val(ids);
});
</script>
@endpush
9 changes: 9 additions & 0 deletions resources/views/components/datatables.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@foreach($dataTypes as $dataType)
<x-joy-voyager-datatable
:slug="$dataType->slug"
:data-id="($dataId ?? 'tables') . '-' . $dataType->slug"
:without-checkbox="$withoutCheckbox"
:without-actions="$withoutActions"
:with-label="$withLabel"
/>
@endforeach
1 change: 1 addition & 0 deletions routes/web.php
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@

Route::get($dataType->slug . '/datatable', $breadController.'@index')->name($dataType->slug.'.datatable');
Route::get($dataType->slug . '/ajax', $breadController.'@ajax')->name($dataType->slug.'.ajax');
Route::post($dataType->slug . '/ajax', $breadController.'@ajax')->name($dataType->slug.'.post-ajax');
}
} catch (\InvalidArgumentException $e) {
throw new \InvalidArgumentException("Custom routes hasn't been configured because: ".$e->getMessage(), 1);
Expand Down
Loading

0 comments on commit 842e77e

Please sign in to comment.