Datatables new layout

This commit is contained in:
Ludovic CANDELLIER
2020-06-29 00:15:19 +02:00
parent 3386f6ee1a
commit 0ad31dac19
15 changed files with 136 additions and 43 deletions

View File

@@ -35,7 +35,9 @@ class ParentDataTable extends DataTable
public function getHtmlButtons()
{
$buttons = '';
// $buttons .= '<button type="button" data-id="{{$id}}" class="btn btn-xs btn-secondary btn-show mr-2"><i class="fa fa-fw fa-eye"></i></button>';
// $buttons .= '<button type="button" data-id="{{$id}}" class="btn btn-xs btn-primary btn-edit mr-2"><i class="fa fa-fw fa-leaf-alt"></i></button>';
$buttons .= '<button type="button" data-id="{{$id}}" class="btn btn-xs btn-primary btn-edit mr-2"><i class="fa fa-fw fa-pencil-alt"></i></button>';
$buttons .= '<button type="button" data-id="{{$id}}" class="btn btn-xs btn-danger btn-del"><i class="fa fa-fw fa-trash"></i></button>';
return $buttons;
@@ -47,7 +49,7 @@ class ParentDataTable extends DataTable
->exportable(false)
->printable(false)
->searchable(false)
->width(80)
->width(120)
->addClass('text-center');
}
@@ -87,32 +89,50 @@ class ParentDataTable extends DataTable
->minifiedAjax()
->dom($this->getDom())
->orderBy(0,'asc')
->buttons($this->getDatatablesButtons());
->buttons(
Button::make('export'),
Button::make('print')
);
}
public function getParameters()
{
return [];
}
public function getDatatablesButtons()
{
$buttons = [];
$buttons[] = Button::make('export');
$buttons[] = Button::make('print');
return $buttons;
return [
'pageLength' => 10
];
}
public function getDom()
{
$dom = $this->getDatatablesHeaderDefault();
$dom .= "rt";
$dom = '';
// $dom .= $this->getDatatablesHeaderDefault();
$dom .= "tr";
$dom .= $this->getDatatablesFooterDefault();
return $dom;
}
public function getDatatablesHeader() {
return view('components.datatables.header');
}
public function getDatatablesHeaderDefault() {
return "<'row dt-toolbar-header'<'col-lg-4'l><'col-lg-4'B><'col-lg-4 text-right add'f>>";
// return "<div class'row'><div class='col'></div></div>";
/*
$dom = 't<"row datatable-pager light"<"col-md-12"'
. '<"datatable-more-export-buttons filter-buttons pull-left">'
. '<"datatable-more-export-favorites-buttons filter-buttons pull-left">'
. '<"datatable-more-export-basket-buttons filter-buttons pull-left">'
. '<"datatable-download-buttons filter-buttons pull-left">'
. '>>'
. '<"dt-toolbar-footer"<"col"i><"col pull-right datatable-pager light nopadding-right"p>>';
*/
$dom = "<'row dt-toolbar-header'<'col-lg-4'l><'col-lg-4'B><'col-lg-4 text-right add'f>>";
return $dom;
// return 't<"row datatable-pager light"<"col-md-12"<"datatable-more-export-buttons filter-buttons pull-left"><"datatable-more-export-favorites-buttons filter-buttons pull-left"><"datatable-more-export-basket-buttons filter-buttons pull-left"><"datatable-download-buttons filter-buttons pull-left">>><"dt-toolbar-footer"<"col-md-6"i><"col-md-6 pull-right datatable-pager light nopadding-right"p>>';
}
public function getDatatablesFooterDefault() {

View File

@@ -5,9 +5,9 @@
])
@section('content')
@include('components.datatable', ['route' => route('Shop.Admin.ArticleAttributeFamilies.create'), 'label' => __('Shop.article_attribute_families.add')])
@include('components.datatable', ['route' => route('Shop.Admin.ArticleAttributeFamilies.index'), 'model' => 'ArticleAttributefamilies'])
@endsection
@push('scripts')
@include('components.js.datatable', ['route' => '/Shop/Admin/ArticleAttributeFamilies', 'model' => 'ArticleAttributefamilies'])
@include('components.js.datatable', ['route' => route('Shop.Admin.ArticleAttributeFamilies.index'), 'model' => 'ArticleAttributefamilies'])
@endpush

View File

@@ -5,9 +5,9 @@
])
@section('content')
@include('components.datatable', ['route' => route('Shop.Admin.ArticleAttributeValues.create'), 'label' => __('Shop.article_attribute_values.add')])
@include('components.datatable', ['route' => route('Shop.Admin.ArticleAttributeValues.index'), 'model' => 'articleattributes'])
@endsection
@push('scripts')
@include('components.js.datatable', ['route' => '/Shop/Admin/ArticleAttributeValues', 'model' => 'articleattributes'])
@include('components.js.datatable', ['route' => route('Shop.Admin.ArticleAttributeValues.index'), 'model' => 'articleattributes'])
@endpush

View File

@@ -5,9 +5,9 @@
])
@section('content')
@include('components.datatable', ['route' => route('Shop.Admin.ArticleFamilies.create'), 'label' => __('Shop.article_families.add')])
@include('components.datatable', ['route' => route('Shop.Admin.ArticleFamilies.index'), 'model' => 'articlefamilies'])
@endsection
@push('scripts')
@include('components.js.datatable', ['route' => '/Shop/Admin/ArticleFamilies', 'model' => 'articlefamilies'])
@include('components.js.datatable', ['route' => route('Shop.Admin.ArticleFamilies.index'), 'model' => 'articlefamilies'])
@endpush

View File

@@ -5,9 +5,9 @@
])
@section('content')
@include('components.datatable', ['route' => route('Shop.Admin.Articles.create'), 'label' => __('Shop.articles.add')])
@include('components.datatable', ['route' => route('Shop.Admin.Articles.index'), 'model' => 'articles'])
@endsection
@push('scripts')
@include('components.js.datatable', ['route' => '/Shop/Admin/Articles', 'model' => 'articles'])
@include('components.js.datatable', ['route' => route('Shop.Admin.Articles.index'), 'model' => 'articles'])
@endpush

View File

@@ -6,15 +6,11 @@
@section('content')
<div class="row pb-3">
<div class="col text-right">
<a href="{{ route('Shop.Admin.Categories.create') }}" class="btn btn-sm btn-success">{{ __('Shop.categories.add') }} <i class="fa fa-plus"></i></a>
</div>
</div>
<div class="row">
<div class="col-8">
{{$dataTable->table()}}
@component('components.card')
@include('components.datatable', ['route' => route('Shop.Admin.Categories.index'), 'model' => 'categories'])
@endcomponent
</div>
<div class="col-4">
@include('Shop.Admin.Categories.partials.tree')
@@ -24,6 +20,6 @@
@endsection
@push('scripts')
@include('components.js.datatable', ['route' => '/Shop/Admin/Categories', 'model' => 'categories'])
@include('components.js.datatable', ['route' => route('Shop.Admin.Categories.index'), 'model' => 'categories'])
@endpush

View File

@@ -5,9 +5,9 @@
])
@section('content')
@include('components.datatable', ['route' => route('Shop.Admin.TagGroups.create'), 'label' => __('Shop.tag_groups.add')])
@include('components.datatable', ['route' => route('Shop.Admin.TagGroups.index'), 'model' => 'TagGroups'])
@endsection
@push('scripts')
@include('components.js.datatable', ['route' => '/Shop/Admin/TagGroups', 'model' => 'TagGroups'])
@include('components.js.datatable', ['route' => route('Shop.Admin.TagGroups.index'), 'model' => 'TagGroups'])
@endpush

View File

@@ -5,7 +5,7 @@
])
@section('content')
@include('components.datatable', ['route' => route('Shop.Admin.Tags.create'), 'label' => __('Shop.tags.add')])
@include('components.datatable', ['route' => route('Shop.Admin.Tags.index'), 'model' => 'tags'])
@endsection
@@ -17,5 +17,5 @@
} );
</script>
@include('components.js.datatable', ['route' => '/Shop/Admin/Tags', 'model' => 'tags'])
@include('components.js.datatable', ['route' => route('Shop.Admin.Tags.index'), 'model' => 'tags'])
@endpush

View File

@@ -0,0 +1,24 @@
<div class="card mb-0 {{ isset($tabs) ? ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'card-outline-tabs' : 'card-tabs' : ''}} {{ ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'card-outline' : '' }} card-{{ $color ?? config('boilerplate.theme.card.default_color', 'info') }}">
@if($title ?? $header ?? false)
<div class="card-header {{ isset($tabs) ? ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'p-0' : 'p-0 pt-1' : '' }} border-bottom-0">
@isset($header)
{{ $header }}
@else
<h3 class="card-title">{{ $title }}</h3>
@isset($tools)
<div class="card-tools">
{{ $tools }}
</div>
@endisset
@endisset
</div>
@endif
<div class="card-body {{ $title ?? false ? ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'pt-0' : '' : '' }}">
{{ $slot }}
</div>
@isset($footer)
<div class="card-footer">
{{ $footer }}
</div>
@endif
</div>

View File

@@ -1,9 +1,4 @@
<div class="row pb-3">
<div class="col text-right">
<a href="{{ $route }}" class="btn btn-sm btn-primary">{{ $label }} <i class="fa fa-plus"></i></a>
</div>
<div id="{{ $model }}-datatable-content">
@include('components.datatables.header')
{{$dataTable->table(['class'=>'table table-bordered table-hover table-striped w-100'])}}
</div>
@component('boilerplate::card')
{{$dataTable->table()}}
@endcomponent

View File

@@ -0,0 +1,10 @@
<button type="button" class="btn bg-gradient-info btn-add"><i class="fa fa-plus-circle"></i></button>
@push('js')
<script>
$('#{{ $model }}-table-header .btn-add').click(function() {
url = '{{ $route }}' + '/create/';
window.location = url;
});
</script>
@endpush

View File

@@ -0,0 +1,14 @@
<div class="text-right datatable-export-buttons">
<button type="button" class="btn bg-gradient-secondary btn-print" data-placement="top" data-original-title="Imprimer le tableau">
<i class="fa fa-print"></i>
</button>
<button type="button" class="btn bg-gradient-secondary btn-excel">
<i class="fa fa-file-excel"></i>
</button>
<button type="button" class="btn bg-gradient-secondary btn-pdf">
<i class="fa fa-file-pdf"></i>
</button>
</div>

View File

@@ -0,0 +1,4 @@
<button type="button" class="btn bg-gradient-secondary btn-filter">
<i class="fa fa-filter"></i>
</button>

View File

@@ -0,0 +1,11 @@
<div class="row table-header" id="{{ $model }}-table-header">
<div class="col-lg-6 col-md-10 col-sm-8 mb-2">
@include('components.datatables.search')
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
@include('components.datatables.buttons.exports')
</div>
<div class="col-lg-2 col-md-2 col-sm-4 text-right">
@include('components.datatables.buttons.add')
</div>
</div>

View File

@@ -0,0 +1,19 @@
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-btn" placeholder="Rechercher..." value="">
<div class="input-group-append">
@include('components.datatables.buttons.filters')
</div>
</div>
@push('js')
<script>
var $search = $('#{{ $model }}-table-header .search-btn');
$search.on( 'keyup click', function () {
var table = window.LaravelDataTables["{{ $model }}-table"];
table.search($search.val()).draw();
} );
</script>
@endpush