Edit and create timesheet records in modal (#603)

- added loading indicator for datatables
- fix multiple reloads of datatable content

assets/js/kimai.js

@@ -39,11 +39,6 @@ $(function() {
             // set the current locale for all javascript components
             moment.locale($.kimai.settings['locale']);
 
-            // ask before a delete call is executed
-            $('body').on('click', 'a.btn-trash', function (event) {
-                return confirm($.kimai.settings['confirmDelete']);
-            });
-
             // activate the dropdown functionality
             $('.dropdown-toggle').dropdown();
 
@@ -58,90 +53,24 @@ $(function() {
                 );
             }
 
-            // ==== compound field in toolbar ====
+            // ask before a delete call is executed
-            $('input[data-daterangepickerenable="on"]').each(function(index) {
+            $('body').on('click', 'a.btn-trash', function (event) {
-                var localeFormat = $(this).data('format');
+                return confirm($.kimai.settings['confirmDelete']);
-                var separator = $(this).data('separator');
-                var rangesList = {};
-                rangesList[$.kimai.settings['today']] = [moment(), moment()];
-                rangesList[$.kimai.settings['yesterday']] = [moment().subtract(1, 'days'), moment().subtract(1, 'days')];
-                rangesList[$.kimai.settings['thisWeek']] = [moment().startOf('week'), moment().endOf('week')];
-                rangesList[$.kimai.settings['lastWeek']] = [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')];
-                rangesList[$.kimai.settings['thisMonth']] = [moment().startOf('month'), moment().endOf('month')];
-                rangesList[$.kimai.settings['lastMonth']] = [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')];
-                rangesList[$.kimai.settings['thisYear']] = [moment().startOf('year'), moment().endOf('year')];
-                rangesList[$.kimai.settings['lastYear']] = [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')];
-
-                $(this).daterangepicker({
-                    showDropdowns: true,
-                    autoUpdateInput: false,
-                    autoApply: false,
-                    linkedCalendars: false,
-                    locale: {
-                        separator: separator,
-                        format: localeFormat,
-                        firstDay: 1,
-                        applyLabel: $.kimai.settings['apply'],
-                        cancelLabel: $.kimai.settings['cancel'],
-                        customRangeLabel: $.kimai.settings['customRange']
-                    },
-                    ranges: rangesList,
-                    alwaysShowCalendars: true
             });
 
-                $(this).on('apply.daterangepicker', function(ev, picker) {
+            // compound field in toolbar
-                    $(this).val(picker.startDate.format(localeFormat) + ' - ' + picker.endDate.format(localeFormat));
+            this.activateDateRangePicker('.content-wrapper');
-                    $(this).trigger("change");
-                });
-            });
 
-            // ==== single select boxes in toolbars ====
+            // single select boxes in toolbars
-            $('input[data-datepickerenable="on"]').each(function(index) {
+            this.activateDatePicker('.content-wrapper');
-                var localeFormat = $(this).data('format');
-                $(this).daterangepicker({
-                    singleDatePicker: true,
-                    showDropdowns: true,
-                    autoUpdateInput: false,
-                    locale: {
-                        format: localeFormat,
-                        firstDay: 1,
-                        applyLabel: $.kimai.settings['apply'],
-                        cancelLabel: $.kimai.settings['cancel'],
-                        customRangeLabel: $.kimai.settings['customRange']
-                    }
-                });
 
-                $(this).on('apply.daterangepicker', function(ev, picker) {
+            // edit timesheet - date with time
-                    $(this).val(picker.startDate.format(localeFormat));
+            this.activateDateTimePicker('.content-wrapper');
-                    $(this).trigger("change");
-                });
-            });
 
-            // ==== edit timesheet - date with time ====
+            // some actions can be performed in a modal for a better UX
-            $('input[data-datetimepicker="on"]').each(function(index) {
+            this.activateAjaxFormInModal('a.modal-ajax-form');
-                var localeFormat = $(this).data('format');
-                $(this).daterangepicker({
-                    singleDatePicker: true,
-                    timePicker: true,
-                    timePicker24Hour: true,
-                    showDropdowns: true,
-                    autoUpdateInput: false,
-                    locale: {
-                        format: localeFormat,
-                        firstDay: 1,
-                        applyLabel: $.kimai.settings['apply'],
-                        cancelLabel: $.kimai.settings['cancel'],
-                        customRangeLabel: $.kimai.settings['customRange']
-                    }
-                });
 
-                $(this).on('apply.daterangepicker', function(ev, picker) {
+            $('body').on('change', 'select[data-related-select]', function(event) {
-                    $(this).val(picker.startDate.format(localeFormat));
-                    $(this).trigger("change");
-                });
-            });
-
-            $('select[data-related-select]').change(function() {
                 var apiUrl = $(this).attr('data-api-url').replace('-s-', $(this).val());
                 var targetSelect = $(this).attr('data-related-select');
 
@@ -187,6 +116,25 @@ $(function() {
                 $(this).find('a.anchor').hide();
             });
         },
+        reloadDatatableWithToolbarFilter: function()
+        {
+            var $form = $('.toolbar form');
+            var loading = '<div class="overlay"><i class="fas fa-sync fa-spin"></i></div>';
+            $('section.content').append(loading);
+            $.ajax({
+                url: $form.attr('action'),
+                type: $form.attr('method'),
+                data: $form.serialize(),
+                success: function(html) {
+                    $('section.content').replaceWith(
+                        $(html).find('section.content')
+                    );
+                },
+                error: function(xhr, err) {
+                    $form.submit();
+                }
+            });
+        },
         pauseRecord: function(selector) {
             $(selector + ' .pull-left i').hover(function () {
                 var link = $(this).parents('a');
@@ -197,6 +145,163 @@ $(function() {
                 link.attr('href', link.attr('href').replace('/pause', '/stop'));
                 $(this).removeClass('fa-pause-circle').removeClass('text-orange').addClass('fa-stop-circle');
             });
+        },
+        activateDatePicker: function(selector) {
+            $(selector + ' input[data-datepickerenable="on"]').each(function(index) {
+                var localeFormat = $(this).data('format');
+                $(this).daterangepicker({
+                    singleDatePicker: true,
+                    showDropdowns: true,
+                    autoUpdateInput: false,
+                    locale: {
+                        format: localeFormat,
+                        firstDay: 1,
+                        applyLabel: $.kimai.settings['apply'],
+                        cancelLabel: $.kimai.settings['cancel'],
+                        customRangeLabel: $.kimai.settings['customRange']
+                    }
+                });
+
+                $(this).on('apply.daterangepicker', function(ev, picker) {
+                    $(this).val(picker.startDate.format(localeFormat));
+                    $(this).trigger("change");
+                });
+            });
+        },
+        activateDateTimePicker: function(selector) {
+            $(selector + ' input[data-datetimepicker="on"]').each(function(index) {
+                var localeFormat = $(this).data('format');
+                $(this).daterangepicker({
+                    singleDatePicker: true,
+                    timePicker: true,
+                    timePicker24Hour: true,
+                    showDropdowns: true,
+                    autoUpdateInput: false,
+                    locale: {
+                        format: localeFormat,
+                        firstDay: 1,
+                        applyLabel: $.kimai.settings['apply'],
+                        cancelLabel: $.kimai.settings['cancel'],
+                        customRangeLabel: $.kimai.settings['customRange']
+                    }
+                });
+
+                $(this).on('apply.daterangepicker', function(ev, picker) {
+                    $(this).val(picker.startDate.format(localeFormat));
+                    $(this).trigger("change");
+                });
+            });
+        },
+        activateDateRangePicker: function(selector) {
+            $(selector + ' input[data-daterangepickerenable="on"]').each(function(index) {
+                var localeFormat = $(this).data('format');
+                var separator = $(this).data('separator');
+                var rangesList = {};
+                rangesList[$.kimai.settings['today']] = [moment(), moment()];
+                rangesList[$.kimai.settings['yesterday']] = [moment().subtract(1, 'days'), moment().subtract(1, 'days')];
+                rangesList[$.kimai.settings['thisWeek']] = [moment().startOf('week'), moment().endOf('week')];
+                rangesList[$.kimai.settings['lastWeek']] = [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')];
+                rangesList[$.kimai.settings['thisMonth']] = [moment().startOf('month'), moment().endOf('month')];
+                rangesList[$.kimai.settings['lastMonth']] = [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')];
+                rangesList[$.kimai.settings['thisYear']] = [moment().startOf('year'), moment().endOf('year')];
+                rangesList[$.kimai.settings['lastYear']] = [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')];
+
+                $(this).daterangepicker({
+                    showDropdowns: true,
+                    autoUpdateInput: false,
+                    autoApply: false,
+                    linkedCalendars: false,
+                    locale: {
+                        separator: separator,
+                        format: localeFormat,
+                        firstDay: 1,
+                        applyLabel: $.kimai.settings['apply'],
+                        cancelLabel: $.kimai.settings['cancel'],
+                        customRangeLabel: $.kimai.settings['customRange']
+                    },
+                    ranges: rangesList,
+                    alwaysShowCalendars: true
+                });
+
+                $(this).on('apply.daterangepicker', function(ev, picker) {
+                    $(this).val(picker.startDate.format(localeFormat) + ' - ' + picker.endDate.format(localeFormat));
+                    $(this).trigger("change");
+                });
+            });
+        },
+        ajaxFormInModal: function(html) {
+            // the modal that we use to render the form in
+            var formIdentifier = '#remote_form_modal .modal-content form';
+            var flashErrorIdentifier = 'div.alert-error';
+            var $form = $(formIdentifier);
+            var $modal = $('#remote_form_modal');
+
+            // will be (re-)activated later
+            $form.off('submit');
+
+            // load new form from given content
+            if ($(html).find('#form_modal .modal-content').length > 0 ) {
+                // TODO cleanup widgets before replacing the content?
+                $('#remote_form_modal .modal-content').replaceWith(
+                    $(html).find('#form_modal .modal-content')
+                );
+                // activate new loaded widgets
+                $.kimai.activateDateTimePicker(formIdentifier);
+            }
+
+            // show error flash messages
+            if ($(html).find(flashErrorIdentifier).length > 0) {
+                $('#remote_form_modal .modal-body').prepend(
+                    $(html).find(flashErrorIdentifier)
+                );
+            }
+
+            $modal.modal('show');
+
+            // the new form that was loaded via ajax
+            $form = $(formIdentifier);
+
+            // click handler for modal save button, to send forms via ajax
+            $form.on('submit', function(event){
+                var btn = $(formIdentifier + ' button[type=submit]').button('loading');
+                event.preventDefault();
+                event.stopPropagation();
+                $.ajax({
+                    url: $form.attr('action'),
+                    type: $form.attr('method'),
+                    data: $form.serialize(),
+                    success: function(html) {
+                        btn.button('reset');
+                        if ($(html).find('#form_modal .modal-content .has-error').length > 0 || $(html).find(flashErrorIdentifier).length > 0) {
+                            $.kimai.ajaxFormInModal(html);
+                        } else {
+                            $.kimai.reloadDatatableWithToolbarFilter();
+                            $modal.modal('hide');
+                        }
+                        return false;
+                    },
+                    error: function(xhr, err) {
+                        // what else could we do? submitting again at least gives us the opportunity to see errors,
+                        // which maybe would be hidden otherwise... this one is totally up for discussion!
+                        $form.submit();
+                    }
+                });
+            });
+        },
+        activateAjaxFormInModal: function(selector) {
+            $('body').on('click', selector, function(event) {
+                event.preventDefault();
+                event.stopPropagation();
+                $.ajax({
+                    url: $(this).attr('href'),
+                    success: function(html) {
+                        $.kimai.ajaxFormInModal(html);
+                    },
+                    error: function(xhr, err) {
+                        window.location = $(this).attr('href');
+                    }
+                });
+            });
         }
     };
 

assets/js/toolbar.js

@@ -28,30 +28,28 @@ $(document).ready(function () {
             default:
                 $('.toolbar form input#page').val(1);
         }
-        toolbarLoadDataAfterChange();
+        $.kimai.reloadDatatableWithToolbarFilter();
     });
 
     $('.toolbar form select').change(function (event) {
+        var reload = true;
+        switch (event.target.id) {
+            case 'customer':
+                if ($('.toolbar form select#project').length > 0) {
+                    reload = false;
+                }
+                break;
+
+            case 'project':
+                if ($('.toolbar form select#activity').length > 0) {
+                    reload = false;
+                }
+                break;
+        }
         $('.toolbar form input#page').val(1);
-        toolbarLoadDataAfterChange();
+        if (reload) {
-    });
+            $.kimai.reloadDatatableWithToolbarFilter();
-
-    function toolbarLoadDataAfterChange()
-    {
-        var $form = $('.toolbar form');
-        $.ajax({
-            url: $form.attr('action'),
-            type: $form.attr('method'),
-            data: $form.serialize(),
-            success: function(html) {
-                $('section.content').replaceWith(
-                    $(html).find('section.content')
-                );
-            },
-            error: function(xhr, err) {
-                $form.submit();
         }
     });
-    }
 
 });

assets/sass/datatable.scss

@@ -5,6 +5,43 @@
  * file that was distributed with this source code.
  */
 
+/* Loading indicator: overwritten from AdminLTE for positioning and supporting fas classes */
+.box .overlay > .fas,
+section.content .overlay > .fas,
+.overlay-wrapper .overlay > .fas {
+    position: absolute;
+    top: 50vh;
+    left: 50vw;
+    margin-left: -15px;
+    margin-top: -15px;
+    color: #000;
+    font-size: 30px;
+}
+
+.box > .overlay,
+.overlay-wrapper > .overlay,
+section.content > .overlay,
+.box > .loading-img,
+.overlay-wrapper > .loading-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.box .overlay,
+section.content .overlay,
+.overlay-wrapper .overlay {
+    z-index: 50;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 3px;
+}
+.box .overlay.dark,
+section.content .overlay.dark,
+.overlay-wrapper .overlay.dark {
+    background: rgba(0, 0, 0, 0.5);
+}
+
 /*
 dataTables.bootstrap.css
 */
@@ -244,6 +281,8 @@ table.dataTable {
         }
         .label {
             font-size: 85%;
+            font-weight: 500;
+            padding: .3em .6em .3em;
         }
     }
 }

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
-  "build/app.js": "/build/app.js?aa004c5695ca2faffbc4",
+  "build/app.js": "/build/app.js?22f3accd3baabc16310c",
-  "build/app.css": "/build/app.css?af8eca9aee27a459b31560560ceddb98",
+  "build/app.css": "/build/app.css?d76b5fe68db00a63c65d6dbde19c6342",
   "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",

templates/admin/activity_edit.html.twig

@@ -1,12 +1,10 @@
-{% extends 'base.html.twig' %}
+{% extends app.request.xmlHttpRequest ? 'form.html.twig' : 'base.html.twig' %}
-{% import "macros/widgets.html.twig" as widgets %}
-{% import "macros/datatables.html.twig" as tables %}
 
 {% block page_title %}{{ 'admin_activity.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'admin_activity.subtitle'|trans }}{% endblock %}
 
 {% block main %}
-    {{ include('default/_form.html.twig', {
+    {{ include(app.request.xmlHttpRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig', {
         'title': activity.name|default('create'|trans),
         'form': form,
         'back': path('admin_activity')

templates/admin/customer_edit.html.twig

@@ -1,12 +1,10 @@
-{% extends 'base.html.twig' %}
+{% extends app.request.xmlHttpRequest ? 'form.html.twig' : 'base.html.twig' %}
-{% import "macros/widgets.html.twig" as widgets %}
-{% import "macros/datatables.html.twig" as tables %}
 
 {% block page_title %}{{ 'admin_customer.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'admin_customer.subtitle'|trans }}{% endblock %}
 
 {% block main %}
-    {{ include('default/_form.html.twig', {
+    {{ include(app.request.xmlHttpRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig', {
         'title': customer.name|default('create'|trans),
         'form': form,
         'back': path('admin_customer')

templates/admin/project_edit.html.twig

@@ -1,12 +1,10 @@
-{% extends 'base.html.twig' %}
+{% extends app.request.xmlHttpRequest ? 'form.html.twig' : 'base.html.twig' %}
-{% import "macros/widgets.html.twig" as widgets %}
-{% import "macros/datatables.html.twig" as tables %}
 
 {% block page_title %}{{ 'admin_project.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'admin_project.subtitle'|trans }}{% endblock %}
 
 {% block main %}
-    {{ include('default/_form.html.twig', {
+    {{ include(app.request.xmlHttpRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig', {
         'title': project.name|default('create'|trans),
         'form': form,
         'back': path('admin_project')

templates/admin/timesheet.html.twig

@@ -12,7 +12,7 @@
     {% endif %}
     {% set actions = actions|merge({'visibility': '#modal_timesheet_admin'}) %}
     {% if is_granted('create_other_timesheet') %}
-        {% set actions = actions|merge({'create': path('admin_timesheet_create')}) %}
+        {% set actions = actions|merge({'create': {'url': path('admin_timesheet_create'), 'class': 'modal-ajax-form'}}) %}
     {% endif %}
     {{ widgets.page_actions(actions) }}
 {% endblock %}
@@ -87,7 +87,7 @@
                 <td>
                     {% set actionButtons = {} %}
                     {% if is_granted('edit', entry) %}
-                        {% set actionButtons = {'edit': path('admin_timesheet_edit', {'id' : entry.id, 'page': page})}|merge(actionButtons) %}
+                        {% set actionButtons = actionButtons|merge({'edit': {'url': path('admin_timesheet_edit', {'id': entry.id, 'page': page}), 'class': 'modal-ajax-form'}}) %}
                     {% endif %}
                     {% if not entry.end and is_granted('stop', entry) %}
                         {% set actionButtons = {'stop': path('admin_timesheet_stop', {'id' : entry.id})}|merge(actionButtons) %}

templates/admin/timesheet_edit.html.twig

@@ -1,12 +1,10 @@
-{% extends 'base.html.twig' %}
+{% extends app.request.xmlHttpRequest ? 'form.html.twig' : 'base.html.twig' %}
-{% import "macros/widgets.html.twig" as widgets %}
-{% import "macros/datatables.html.twig" as tables %}
 
 {% block page_title %}{{ 'timesheet.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'timesheet.subtitle'|trans }}{% endblock %}
 
 {% block main %}
-    {{ include('default/_form.html.twig', {
+    {{ include(app.request.xmlHttpRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig', {
         'title': (entry.id ? 'timesheet.edit'|trans : 'create'|trans),
         'form': form,
         'back': path('admin_timesheet')

templates/base.html.twig

@@ -4,6 +4,12 @@
     <div class="toolbar-pad no-print">
         {% block main_before %}{% endblock %}
     </div>
+    {% embed 'embeds/modal.html.twig' %}
+        {% block modal_id %}remote_form_modal{% endblock %}
+        {% block modal_title %}{% endblock %}
+        {% block modal_body %}{% endblock %}
+        {% block modal_footer %}{% endblock %}
+    {% endembed %}
 {% endblock %}
 
 {% block avanzu_page_content_after %}
@@ -100,7 +106,7 @@
 {% endblock %}
 
 {% block javascripts %}
-    {# we do not call parent() as we use a custom built for the frontend assets and don't want the default <script> #}
+    {# no call to parent(), as we use a custom built for the frontend assets and don't want the default <script> #}
     <script type="text/javascript">
         $(document).ready(function () {
             $.kimai.init({

templates/calendar/user.html.twig

@@ -1,11 +1,16 @@
 {% extends 'base.html.twig' %}
 {% import "macros/widgets.html.twig" as widgets %}
-{% import "macros/datatables.html.twig" as tables %}
-{% import "macros/toolbar.html.twig" as toolbar %}
 
 {% block page_title %}{{ 'calendar.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'calendar.subtitle'|trans }}{% endblock %}
-{% block page_actions %}{{ widgets.page_actions({'list': path('timesheet'), 'create': path('timesheet_create', {'origin': 'calendar'})}) }}{% endblock %}
+
+{% block page_actions %}
+    {% set actions = {'list': path('timesheet')} %}
+    {% if is_granted('create_own_timesheet') %}
+        {% set actions = actions|merge({'create': {'url': path('timesheet_create', {'origin': 'calendar'})}}) %}
+    {% endif %}
+    {{ widgets.page_actions(actions) }}
+{% endblock %}
 
 {% block main %}
     <div class="row">

templates/default/_form_modal.html.twig

@@ -0,0 +1,18 @@
+{% embed 'embeds/modal.html.twig' %}
+    {% block modal_id %}form_modal{% endblock %}
+    {% block modal_before %}{{ form_start(form) }}{% endblock %}
+    {% block modal_title %}
+        {{ title }}
+        {% if form.vars.docu_chapter is defined and form.vars.docu_chapter is not empty %}
+            <a href="{{ path('help_chapter', {'chapter': form.vars.docu_chapter}) }}"><i class="{{ 'help'|icon }}"></i></a>
+        {% endif %}
+    {% endblock %}
+    {% block modal_body %}
+        {{ form_widget(form) }}
+    {% endblock %}
+    {% block modal_footer %}
+        <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">{{ 'action.close'|trans }}</button>
+        <button type="submit" class="btn btn-primary modal-form-save" data-loading-text="Loading..." id="{{ block('modal_id') }}_save">{{ 'action.save'|trans }}</button>
+    {% endblock %}
+    {% block modal_end %}{{ form_end(form) }}{% endblock %}
+{% endembed %}

templates/embeds/modal.html.twig

@@ -0,0 +1,18 @@
+<div class="modal fade" id="{{ block('modal_id') }}" tabindex="-1" role="dialog" aria-labelledby="{{ block('modal_id') }}_label">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            {% if block('modal_before') is defined %}{{ block('modal_before') }}{% endif %}
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'action.close'|trans }}"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="{{ block('modal_id') }}_label">{{ block('modal_title') }}</h4>
+            </div>
+            <div class="modal-body">
+                {{ block('modal_body') }}
+            </div>
+            <div class="modal-footer">
+                {{ block('modal_footer') }}
+            </div>
+            {% if block('modal_end') is defined %}{{ block('modal_end') }}{% endif %}
+        </div>
+    </div>
+</div>

templates/export/index.html.twig

@@ -8,7 +8,7 @@
 {% block page_actions %}
     {% set actions = {
         'filter': '#collapseExport',
-        'fas fa-toggle-off': {'id':'export-toggle-button'}
+        'off': {'id':'export-toggle-button'}
     } %}
     {{ widgets.page_actions(actions) }}
 {% endblock %}
@@ -26,24 +26,6 @@
     {% if entries is empty %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% else %}
-        {#
-        {% set columns = {'date': ''} %}
-
-        {% if not duration_only %}
-            {% set columns = columns|merge({'starttime': 'hidden-xs', 'endtime': 'hidden-xs'}) %}
-        {% endif %}
-
-        {% set columns = columns|merge({
-            'duration': '',
-            'rate': '',
-            'customer': 'hidden-xs hidden-sm',
-            'project': 'hidden-xs hidden-sm',
-            'activity': 'hidden-xs hidden-sm',
-            'username': 'hidden-xs',
-            'description': 'hidden-xs hidden-sm',
-            'actions': 'alwaysVisible',
-        }) %}
-        #}
         {% set columns = {
             'date': '',
             'user': 'hidden-xs hidden-sm',

templates/form.html.twig

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="{{ app.request.locale }}">
+<head></head>
+<body class="ajax-forms">
+<div id="ajax-messages">
+    {{ include('@AdminLTE/Partials/_flash_messages.html.twig') }}
+</div>
+<div id="ajax-form">
+    {{ block('main') }}
+</div>
+</body>

templates/invoice/index.html.twig

@@ -59,7 +59,7 @@
                 {% set rate = entry.user.preferenceValue('hourly_rate') %}
             {% endif %}
             <tr>
-                <td>{{ entry.begin|date_short }}</td>
+                <td class="text-nowrap">{{ entry.begin|date_short }}</td>
                 <td class="hidden-xs hidden-sm">{{ widgets.label_user(entry.user) }}</td>
                 <td class="hidden-xs hidden-sm timesheet-description">
                     {% if entry.description is not empty %}
@@ -69,8 +69,8 @@
                     {% endif %}
                 </td>
                 <td class="text-center">{{ rate|money(model.calculator.currency) }}</td>
-                <td class="text-center">{{ duration }}</td>
+                <td class="text-center text-nowrap">{{ duration }}</td>
-                <td class="text-right">{{ entry.rate|money(model.calculator.currency) }}</td>
+                <td class="text-right text-nowrap">{{ entry.rate|money(model.calculator.currency) }}</td>
             </tr>
         {% endfor %}
         {{ tables.data_table_footer(entries) }}

templates/macros/widgets.html.twig

@@ -3,54 +3,10 @@
 {% endmacro %}
 
 {%- macro page_actions(tools) -%}
+    {% import _self as macro %}
     <div class="breadcrumb">
         <div class="box-tools">
-            <div class="btn-group">
+            {{ macro.button_group(tools) }}
-                {%- for icon,values in tools  %}
-                    {% spaceless %}
-                    {% set id = null %}
-                    {% set onclick = null %}
-                    {% set modal = null %}
-                    {% set toggle = null %}
-                    {% set url = null %}
-
-                    {% if not values is iterable %}
-                        {% set url = values %}
-                        {% if 'onclick:' in url %}
-                            {% set onclick = url|replace({'onclick:': ''}) %}
-                            {% set url = '#' %}
-                        {% endif %}
-                        {% if '#collapse' in url %}
-                            {% set toggle = 'collapse' %}
-                        {% endif %}
-                        {% if '#modal' in url %}
-                            {% set modal = url %}
-                            {% set url = '#' %}
-                        {% endif %}
-                    {% else %}
-                        {% set url = values.url ?? '#' %}
-                        {% set onclick = values.onclick ?? null %}
-                        {% set modal = values.modal ?? null %}
-                        {% set toggle = values.toggle ?? null %}
-                        {% set id = values.id ?? null %}
-                    {% endif %}
-                    {% endspaceless %}
-                    <a class="btn btn-default" href="{{ url }}"
-                        {%- if id is not empty -%}
-                            id="{{ id }}"
-                        {%- endif -%}
-                        {%- if toggle is not empty -%}
-                            data-toggle="{{ toggle }}"
-                        {%- endif -%}
-                        {%- if modal is not empty -%}
-                            data-toggle="modal" data-target="{{ modal }}"
-                        {%- endif -%}
-                        {%- if onclick is not empty -%}
-                            onclick="{{ onclick }}"
-                        {%- endif -%}
-                    ><i class="{{ icon|icon(icon) }}"></i></a>
-                {% endfor -%}
-            </div>
         </div>
     </div>
 {%- endmacro -%}
@@ -190,14 +146,57 @@
 {% macro button_group(actions) %}
     {% import _self as macro %}
     <div class="btn-group">
-        {% for icon, url in actions %}
+        {%- for icon,values in actions  %}
-            {{ macro.button_action(icon, url) }}
+            {% spaceless %}
-        {% endfor %}
+                {% set id = null %}
+                {% set onclick = null %}
+                {% set modal = null %}
+                {% set toggle = null %}
+                {% set url = null %}
+                {% set class = "btn btn-default btn-" ~ icon ~ " " %}
+
+                {% if not values is iterable %}
+                    {% set url = values %}
+                    {% if 'onclick:' in url %}
+                        {% set onclick = url|replace({'onclick:': ''}) %}
+                        {% set url = '#' %}
+                    {% endif %}
+                    {% if '#collapse' in url %}
+                        {% set toggle = 'collapse' %}
+                    {% endif %}
+                    {% if '#modal' in url %}
+                        {% set modal = url %}
+                        {% set url = '#' %}
+                    {% endif %}
+                {% else %}
+                    {% set url = values.url ?? '#' %}
+                    {% set onclick = values.onclick ?? null %}
+                    {% set modal = values.modal ?? null %}
+                    {% set toggle = values.toggle ?? null %}
+                    {% set id = values.id ?? null %}
+                    {% set class = class ~ ( values.class | default("")) %}
+                {% endif %}
+            {% endspaceless %}
+            <a class="{{ class | trim }}" href="{{ url }}"
+                    {%- if id is not empty -%}
+                        id="{{ id }}"
+                    {%- endif -%}
+                    {%- if toggle is not empty -%}
+                        data-toggle="{{ toggle }}"
+                    {%- endif -%}
+                    {%- if modal is not empty -%}
+                        data-toggle="modal" data-target="{{ modal }}"
+                    {%- endif -%}
+                    {%- if onclick is not empty -%}
+                        onclick="{{ onclick }}"
+                    {%- endif -%}
+            >{{ macro.icon(icon) }}</a>
+        {% endfor -%}
     </div>
 {% endmacro %}
 
 {% macro button_action(icon, url) %}
     <a href="{{ url }}" class="btn btn-default btn-{{ icon }}">
-        <i class="{{ icon|icon(icon) }}"></i>
+        {{ macro.icon(icon) }}
     </a>
 {% endmacro %}

templates/timesheet/edit.html.twig

@@ -1,12 +1,10 @@
-{% extends 'base.html.twig' %}
+{% extends app.request.xmlHttpRequest ? 'form.html.twig' : 'base.html.twig' %}
-{% import "macros/widgets.html.twig" as widgets %}
-{% import "macros/datatables.html.twig" as tables %}
 
 {% block page_title %}{{ 'timesheet.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'timesheet.subtitle'|trans }}{% endblock %}
 
 {% block main %}
-    {{ include('default/_form.html.twig', {
+    {{ include(app.request.xmlHttpRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig', {
         'title': (entry.id ? 'timesheet.edit'|trans : 'create'|trans),
         'form': form,
         'back': path('timesheet')

templates/timesheet/index.html.twig

@@ -30,12 +30,12 @@
 {% block page_actions %}
     {% set actions = {'filter': '#collapseTimesheet'} %}
     {% if is_granted('export_own_timesheet') %}
-        {% set actions = actions|merge({'download': 'onclick:return exportTimesheet()'}) %}
+        {% set actions = actions|merge({'download': {'onclick': 'return exportTimesheet()'}}) %}
     {% endif %}
     {% set actions = actions|merge({'visibility': '#modal_timesheet'}) %}
     {% set actions = actions|merge({'calendar': path('calendar')}) %}
     {% if is_granted('create_own_timesheet') %}
-        {% set actions = actions|merge({'create': path('timesheet_create')}) %}
+        {% set actions = actions|merge({'create': {'url': path('timesheet_create'), 'class': 'modal-ajax-form'}}) %}
     {% endif %}
     {{ widgets.page_actions(actions) }}
 {% endblock %}
@@ -119,7 +119,7 @@
                 <td>
                     {% set actionButtons = {} %}
                     {% if is_granted('edit', entry) %}
-                        {% set actionButtons = actionButtons|merge({'edit': path('timesheet_edit', {'id' : entry.id, 'page': page})}) %}
+                        {% set actionButtons = actionButtons|merge({'edit': {'url': path('timesheet_edit', {'id': entry.id, 'page': page}), 'class': 'modal-ajax-form'}}) %}
                     {% endif %}
 
                     {% if entry.end %}

tests/Controller/Admin/TimesheetControllerTest.php

@@ -40,7 +40,7 @@ class TimesheetControllerTest extends ControllerBaseTest
         $this->assertEquals(4, count($result));
 
         foreach ($result as $item) {
-            $this->assertEquals('btn btn-default', $item->getAttribute('class'));
+            $this->assertContains('btn btn-default', $item->getAttribute('class'));
             $this->assertEquals('i', $item->firstChild->tagName);
         }
     }

tests/Controller/TimesheetControllerTest.php

@@ -38,7 +38,7 @@ class TimesheetControllerTest extends ControllerBaseTest
         $this->assertEquals(5, count($result));
 
         foreach ($result as $item) {
-            $this->assertEquals('btn btn-default', $item->getAttribute('class'));
+            $this->assertContains('btn btn-default', $item->getAttribute('class'));
             $this->assertEquals('i', $item->firstChild->tagName);
         }
     }