pagination without reload while keeping filters applied (#521)

assets/js/kimai.js

@@ -33,7 +33,7 @@ $(function() {
             moment.locale($.kimai.settings['locale']);
 
             // ask before a delete call is executed
-            $('a.btn-trash').click(function (event) {
+            $('body').on('click', 'a.btn-trash', function (event) {
                 return confirm($.kimai.settings['confirmDelete']);
             });
 
@@ -125,16 +125,6 @@ $(function() {
             }, function(){
                 $(this).find('a.anchor').hide();
             });
-
-            /*
-            $('input').iCheck({
-                checkboxClass: 'icheckbox_square-blue',
-                radioClass: 'iradio_square-blue',
-                increaseArea: '20%' // optional
-            });
-            */
-
-            // $.AdminLTE.pushMenu.expandOnHover();
         },
         pauseRecord: function(selector) {
             $(selector + ' .pull-left i').hover(function () {

assets/js/toolbar.js

@@ -6,23 +6,31 @@
  */
 $(document).ready(function () {
 
+    /* Submit the pagination including the toolbar filters */
+    $('body').on('click', 'div.navigation ul.pagination li a', function(event) {
+        var $pager = $(".toolbar form input[name='page']");
+        if ($pager.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        var $urlParts = $(this).attr('href').split('/');
+        var page = $urlParts[$urlParts.length-1];
+        $pager.val(page);
+        $pager.trigger('change');
+        return false;
+    });
+
     $('.toolbar form input').change(function (event) {
         toolbarLoadDataAfterChange();
     });
 
     $('.toolbar form select').change(function (event) {
         switch (event.target.id) {
-            case 'customer':
+            case 'page':
-                $('.toolbar form select#project').val('');
-                if ($('.toolbar form select#activity').find(':selected').attr('data-project')) {
-                    $('.toolbar form select#activity').val('');
-                }
-                break;
-            case 'project':
-                if ($('.toolbar form select#activity').find(':selected').attr('data-project')) {
-                    $('.toolbar form select#activity').val('');
-                }
                 break;
+            default:
+                $('.toolbar form input#page').val(1);
         }
         toolbarLoadDataAfterChange();
     });

assets/sass/datatable.scss

@@ -222,3 +222,15 @@ div.dataTables_scrollHead table.table-bordered {
 .table-striped.dataTable tbody tr.active:nth-child(odd) th {
     background-color: #017ebc;
 }
+
+/*
+    Make sure that the action buttons do not line-break if another column takes all available space
+    See https://github.com/twbs/bootstrap/issues/9939#issuecomment-37682952
+ */
+table.dataTable {
+    td {
+        .btn-group {
+            display: flex;
+        }
+    }
+}

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
-  "build/app.js": "/build/app.js?4231baed5706cefe8c25",
+  "build/app.js": "/build/app.js?5b6a5a9160ea779a403e",
-  "build/app.css": "/build/app.css?c7fd4b9cec5de89467ba89547d2857aa",
+  "build/app.css": "/build/app.css?fc142c29c80f5dcdbc4c745af16509f6",
   "build/images/blue@2x.png": "/build/images/blue@2x.png?2694acfd",
   "build/images/blue.png": "/build/images/blue.png?96f8a905",
   "build/fonts/fa-solid-900.woff2": "/build/fonts/fa-solid-900.woff2?e8a92a29",

src/Controller/Admin/TimesheetController.php

@@ -62,7 +62,7 @@ class TimesheetController extends AbstractController
 
         return $this->render('admin/timesheet.html.twig', [
             'entries' => $entries,
-            'page' => $page,
+            'page' => $query->getPage(),
             'query' => $query,
             'showFilter' => $form->isSubmitted(),
             'toolbarForm' => $form->createView(),
@@ -78,7 +78,6 @@ class TimesheetController extends AbstractController
     public function exportAction(Request $request)
     {
         $query = new TimesheetQuery();
-        $query->setOrder(TimesheetQuery::ORDER_ASC);
 
         $form = $this->getToolbarForm($query);
         $form->handleRequest($request);

src/Controller/TimesheetController.php

@@ -71,7 +71,7 @@ class TimesheetController extends AbstractController
 
         return $this->render('timesheet/index.html.twig', [
             'entries' => $entries,
-            'page' => $page,
+            'page' => $query->getPage(),
             'query' => $query,
             'showFilter' => $form->isSubmitted(),
             'toolbarForm' => $form->createView(),
@@ -88,7 +88,6 @@ class TimesheetController extends AbstractController
     public function exportAction(Request $request)
     {
         $query = new TimesheetQuery();
-        $query->setOrder(TimesheetQuery::ORDER_ASC);
 
         $form = $this->getToolbarForm($query);
         $form->handleRequest($request);

src/Form/Toolbar/AbstractToolbarForm.php

@@ -25,6 +25,7 @@ use App\Repository\Query\ActivityQuery;
 use App\Repository\Query\CustomerQuery;
 use App\Repository\Query\ProjectQuery;
 use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\Form\FormEvent;
 use Symfony\Component\Form\FormEvents;
@@ -213,4 +214,14 @@ abstract class AbstractToolbarForm extends AbstractType
             }
         );
     }
+
+    /**
+     * @param FormBuilderInterface $builder
+     */
+    protected function addHiddenPagination(FormBuilderInterface $builder)
+    {
+        $builder->add('page', HiddenType::class, [
+            'empty_data' => 1
+        ]);
+    }
 }

src/Form/Toolbar/ActivityToolbarForm.php

@@ -27,6 +27,7 @@ class ActivityToolbarForm extends AbstractToolbarForm
         $this->addVisibilityChoice($builder);
         $this->addCustomerChoice($builder);
         $this->addProjectChoice($builder);
+        $this->addHiddenPagination($builder);
     }
 
     /**

src/Form/Toolbar/CustomerToolbarForm.php

@@ -25,6 +25,7 @@ class CustomerToolbarForm extends AbstractToolbarForm
     {
         $this->addPageSizeChoice($builder);
         $this->addVisibilityChoice($builder);
+        $this->addHiddenPagination($builder);
     }
 
     /**

src/Form/Toolbar/ProjectToolbarForm.php

@@ -26,6 +26,7 @@ class ProjectToolbarForm extends AbstractToolbarForm
         $this->addPageSizeChoice($builder);
         $this->addVisibilityChoice($builder);
         $this->addCustomerChoice($builder);
+        $this->addHiddenPagination($builder);
     }
 
     /**

src/Form/Toolbar/TimesheetAdminToolbarForm.php

@@ -29,5 +29,6 @@ class TimesheetAdminToolbarForm extends TimesheetToolbarForm
         $this->addCustomerChoice($builder);
         $this->addProjectChoice($builder);
         $this->addActivityChoice($builder);
+        $this->addHiddenPagination($builder);
     }
 }

src/Form/Toolbar/TimesheetToolbarForm.php

@@ -31,6 +31,7 @@ class TimesheetToolbarForm extends AbstractToolbarForm
         $this->addCustomerChoice($builder);
         $this->addProjectChoice($builder);
         $this->addActivityChoice($builder);
+        $this->addHiddenPagination($builder);
     }
 
     /**

src/Form/Toolbar/UserToolbarForm.php

@@ -26,6 +26,7 @@ class UserToolbarForm extends AbstractToolbarForm
         $this->addPageSizeChoice($builder);
         $this->addVisibilityChoice($builder, 'label.active');
         $this->addUserRoleChoice($builder);
+        $this->addHiddenPagination($builder);
     }
 
     /**

src/Form/Type/BeginDateType.php

@@ -29,7 +29,6 @@ class BeginDateType extends AbstractType
             'widget' => 'single_text',
             'html5' => false,
             'format' => DateType::HTML5_FORMAT,
-            'empty_data' => (new \DateTime('first day of this month'))->format('Y-M-d')
         ]);
 
         $resolver->setDefault('attr', function (Options $options) {

src/Form/Type/EndDateType.php

@@ -29,7 +29,6 @@ class EndDateType extends AbstractType
             'widget' => 'single_text',
             'html5' => false,
             'format' => DateType::HTML5_FORMAT,
-            'empty_data' => (new \DateTime('last day of this month'))->format('Y-M-d')
         ]);
 
         $resolver->setDefault('attr', function (Options $options) {

src/Form/Type/PageSizeType.php

@@ -26,7 +26,7 @@ class PageSizeType extends AbstractType
         $resolver->setDefaults([
             'label' => 'label.pageSize',
             'choices' => [10 => 10, 25 => 25, 50 => 50, 75 => 75, 100 => 100],
-            //'attr' => ['class' => 'selectpicker', 'data-live-search' => false, 'data-width' => '100%']
+            'placeholder' => null,
         ]);
     }
 

src/Repository/TimesheetRepository.php

@@ -333,7 +333,7 @@ class TimesheetRepository extends AbstractRepository
                 $qb->andWhere('t.end <= :end')
                     ->setParameter('end', $query->getEnd());
             }
-        } elseif (null !== $query->getBegin()) {
+        } elseif (null !== $query->getEnd()) {
             $qb->andWhere('t.begin <= :end')
                 ->setParameter('end', $query->getEnd());
         }

templates/invoice/index.html.twig

@@ -15,7 +15,6 @@
     {{ widgets.page_actions(actions) }}
 {% endblock %}
 
-
 {% block page_content_class %}{{ parent() }} invoice{% endblock %}
 
 {% block main_before %}
@@ -51,7 +50,7 @@
     {% if is_granted('create_invoice') %}
     <script type="text/javascript">
         $(document).ready(function () {
-            $( "#print-invoice-button" ).click(function() {
+            $("body").on('click', '#print-invoice-button', function() {
                 var prevAction = $( "#invoice-print-form" ).attr('action');
                 $( "#invoice-print-form" ).attr('target', '_blank').attr('action', '{{ path('invoice_print') }}');
                 $( "#invoice-print-form" ).submit();

translations/flashmessages.de.xliff

@@ -20,7 +20,7 @@
             </trans-unit>
             <trans-unit id="timesheet.start.exceeded_limit">
                 <source>timesheet.start.exceeded_limit</source>
-                <target>das Limit aktiver Zeitmessungen wurde erreicht, bitte stoppen Sie zunächst laufen Zeitmessungen</target>
+                <target>das Limit aktiver Zeitmessungen wurde erreicht, bitte stoppen Sie mindestens eine laufende Zeitmessung.</target>
             </trans-unit>
             <trans-unit id="action.update.success">
                 <source>action.update.success</source>

translations/flashmessages.en.xliff

@@ -20,7 +20,7 @@
             </trans-unit>
             <trans-unit id="timesheet.start.exceeded_limit">
                 <source>timesheet.start.exceeded_limit</source>
-                <target>the limit of active time records has been reached, please stop running time measurements first</target>
+                <target>the limit of active time records has been reached, please stop at least one running time measurement first.</target>
             </trans-unit>
             <trans-unit id="action.update.success">
                 <source>action.update.success</source>