Datatables new layout

app/DataTables/ParentDataTable.php

@@ -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 [];
+        return [
-    }
+            'pageLength' => 10
-
+        ];
-    public function getDatatablesButtons()
-    {
-        $buttons = [];
-        $buttons[] = Button::make('export');
-        $buttons[] = Button::make('print');
-        return $buttons;
     }
 
     public function getDom()
     {
-        $dom = $this->getDatatablesHeaderDefault();
+        $dom = '';
-        $dom .= "rt";
+        // $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() {

resources/views/Shop/Admin/ArticleAttributeFamilies/list.blade.php

@@ -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

resources/views/Shop/Admin/ArticleAttributeValues/list.blade.php

@@ -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

resources/views/Shop/Admin/ArticleFamilies/list.blade.php

@@ -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

resources/views/Shop/Admin/Articles/list.blade.php

@@ -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

resources/views/Shop/Admin/Categories/list.blade.php

@@ -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
 

resources/views/Shop/Admin/TagGroups/list.blade.php

@@ -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

resources/views/Shop/Admin/Tags/list.blade.php

@@ -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

resources/views/components/card.blade.php

@@ -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>

resources/views/components/datatable.blade.php

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

resources/views/components/datatables/buttons/add.blade.php

@@ -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	

resources/views/components/datatables/buttons/exports.blade.php

@@ -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>

resources/views/components/datatables/buttons/filters.blade.php

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

resources/views/components/datatables/header.blade.php

@@ -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>

resources/views/components/datatables/search.blade.php

@@ -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