From b2e0e4b7adc5ffba3bfa989013eabe8cadd718b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <Jan.h.boehmer@gmx.de>
Date: Tue, 12 Mar 2019 19:09:22 +0100
Subject: [PATCH] Improved part tables.

---
 assets/js/app.js                |  3 ++-
 config/packages/datatables.yaml |  4 +++-
 public/helper/datatables.js     |  2 +-
 templates/parts_list.html.twig  | 19 +++++++++++++++----
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 8f1e0227..2512594c 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -17,8 +17,9 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import '@fortawesome/fontawesome-free/css/all.css'
 
 import 'datatables.net-bs4/css/dataTables.bootstrap4.css'
-
 import 'datatables.net-buttons-bs4/css/buttons.bootstrap4.css'
+import 'datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.css'
+import 'datatables.net-select-bs4/css/select.bootstrap4.css'
 
 //require( 'jszip' );
 //#require( 'pdfmake' );
diff --git a/config/packages/datatables.yaml b/config/packages/datatables.yaml
index 21f02498..9e2b0630 100644
--- a/config/packages/datatables.yaml
+++ b/config/packages/datatables.yaml
@@ -7,7 +7,9 @@ datatables:
     options:
         lengthMenu : [10, 25, 50, 100, 250, 500, 1000, 2500]
         pageLength: 50
-        dom: "<'row' <'col-sm-12' tr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pi>>"
+        #dom: "<'row' <'col-sm-12' tr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pif>>"
+        pagingType: 'simple_numbers'
+        searching: true
 
     template_parameters:
         # Example classes to integrate nicely with Bootstrap 3.x
diff --git a/public/helper/datatables.js b/public/helper/datatables.js
index 1065b15d..0269ed13 100644
--- a/public/helper/datatables.js
+++ b/public/helper/datatables.js
@@ -54,7 +54,7 @@
                             data.draw = request.draw;
                             drawCallback(data);
                             data = null;
-                            if (Object.keys(state).length) {
+                            if (Object.keys(state).length && dt.state != null) {
                                 var merged = $.extend(true, {}, dt.state(), state);
                                 dt
                                     .order(merged.order)
diff --git a/templates/parts_list.html.twig b/templates/parts_list.html.twig
index 06e7b1a8..6cb6e9ae 100644
--- a/templates/parts_list.html.twig
+++ b/templates/parts_list.html.twig
@@ -2,9 +2,16 @@
 
 {% block content %}
 
-    <div id="part_list">
-        <h4>{% trans %}part_list.loading.caption{% endtrans %}</h4>
-        <h6>{% trans %}part_list.loading.message{% endtrans %}</h6>
+    <div class="card border-primary">
+        <div class="card-header bg-primary text-white">
+            <h6>Bauteile</h6>
+        </div>
+        <div id="part_list" class="table-responsive">
+            <div class="card-body">
+                <h4>{% trans %}part_list.loading.caption{% endtrans %}</h4>
+                <h6>{% trans %}part_list.loading.message{% endtrans %}</h6>
+            </div>
+        </div>
     </div>
 
 {% endblock %}
@@ -12,7 +19,11 @@
 {% block scripts %}
     <script>
         $( function() {
-            $('#part_list').initDataTables({{ datatable_settings(datatable) }});
+            $('#part_list').initDataTables({{ datatable_settings(datatable) }},
+                {
+                    "fixedHeader": { header: $(window).width() >= 768, //Only enable fixedHeaders on devices with big screen. Fixes scrolling issues on smartphones.
+                        headerOffset: $("#navbar").height()}
+                });
         });
     </script>
 {% endblock %}
\ No newline at end of file