From 1114538f4138a977a9e10cb2664ee97429a41e7c Mon Sep 17 00:00:00 2001
From: Kevin Papst <kevinpapst@users.noreply.github.com>
Date: Thu, 24 Oct 2019 23:46:22 +0200
Subject: [PATCH] duration field in timesheet edit dialog (#1180)

---
 config/serializer/App/Entity.Project.yml     |   5 +-
 src/Form/TimesheetEditForm.php               |  13 ++
 src/Invoice/Renderer/RendererTrait.php       |   1 +
 templates/default/_form.html.twig            |   6 +-
 templates/default/_form_delete.html.twig     |   4 +-
 templates/default/_form_modal.html.twig      |  57 ++++--
 templates/embeds/modal.html.twig             |   5 +
 templates/form/kimai-theme.html.twig         |  15 +-
 templates/timesheet/edit.html.twig           | 175 ++++++++++++++++++-
 tests/API/ProjectControllerTest.php          |   2 +-
 tests/Invoice/Renderer/DebugRendererTest.php |   1 +
 11 files changed, 259 insertions(+), 25 deletions(-)

diff --git a/config/serializer/App/Entity.Project.yml b/config/serializer/App/Entity.Project.yml
index d997ec7c..bad4b1f5 100644
--- a/config/serializer/App/Entity.Project.yml
+++ b/config/serializer/App/Entity.Project.yml
@@ -1,6 +1,6 @@
 App\Entity\Project:
     exclusion_policy: All
-    custom_accessor_order: [id, name, comment, visible, orderNumber, customer, fixedRate, hourlyRate, color, budget, timeBudget, metaFields]
+    custom_accessor_order: [id, name, comment, visible, orderNumber, orderDate, customer, fixedRate, hourlyRate, color, budget, timeBudget, metaFields]
     properties:
         id:
             include: true
@@ -20,6 +20,9 @@ App\Entity\Project:
         orderNumber:
             include: true
             groups: [Entity]
+        orderDate:
+            include: true
+            groups: [Entity]
         fixedRate:
             include: true
             groups: [Project]
diff --git a/src/Form/TimesheetEditForm.php b/src/Form/TimesheetEditForm.php
index bb9edaf7..b0486450 100644
--- a/src/Form/TimesheetEditForm.php
+++ b/src/Form/TimesheetEditForm.php
@@ -127,6 +127,16 @@ class TimesheetEditForm extends AbstractType
             $this->addEnd($builder, $dateTimeOptions);
         }
 
+        if ($options['allow_begin_datetime'] && $options['allow_end_datetime']) {
+            $builder->add('duration', DurationType::class, [
+                'required' => false,
+                'attr' => [
+                    'placeholder' => '00:00',
+                    'pattern' => '[0-9]{2,3}:[0-9]{2}'
+                ]
+            ]);
+        }
+
         if ($this->showCustomer($options, $isNew, $customerCount)) {
             $this->addCustomer($builder, $customer);
         }
@@ -326,6 +336,9 @@ class TimesheetEditForm extends AbstractType
             ->add('description', TextareaType::class, [
                 'label' => 'label.description',
                 'required' => false,
+                'attr' => [
+                    'autofocus' => 'autofocus'
+                ]
             ]);
     }
 
diff --git a/src/Invoice/Renderer/RendererTrait.php b/src/Invoice/Renderer/RendererTrait.php
index 2ebf63e3..93a4af05 100644
--- a/src/Invoice/Renderer/RendererTrait.php
+++ b/src/Invoice/Renderer/RendererTrait.php
@@ -140,6 +140,7 @@ trait RendererTrait
                 'project.name' => $project->getName(),
                 'project.comment' => $project->getComment(),
                 'project.order_number' => $project->getOrderNumber(),
+                'project.order_date' => null !== $project->getOrderDate() ? $this->getFormattedDateTime($project->getOrderDate()) : '',
                 'project.fixed_rate' => $project->getFixedRate(),
                 'project.hourly_rate' => $project->getHourlyRate(),
             ]);
diff --git a/templates/default/_form.html.twig b/templates/default/_form.html.twig
index 592d3fea..b9417f75 100644
--- a/templates/default/_form.html.twig
+++ b/templates/default/_form.html.twig
@@ -2,6 +2,7 @@
     {% form_theme form form_theme %}
 {% endif %}
 <div class="box box-primary">
+    {% block form_before %}{% endblock %}
     {{ form_start(form) }}
     <div class="box-header with-border">
         <h3 class="box-title">
@@ -12,7 +13,9 @@
         </h3>
     </div>
     <div class="box-body">
-         {{ form_widget(form) }}
+        {% block form_body %}
+            {{ form_widget(form) }}
+        {% endblock %}
     </div>
     <div class="box-footer">
         <input type="submit" value="{{ 'action.save'|trans }}" class="btn btn-primary" />
@@ -24,4 +27,5 @@
         {% endif %}
     </div>
     {{ form_end(form) }}
+    {% block form_after %}{% endblock %}
 </div>
\ No newline at end of file
diff --git a/templates/default/_form_delete.html.twig b/templates/default/_form_delete.html.twig
index 67c718ed..42e51523 100644
--- a/templates/default/_form_delete.html.twig
+++ b/templates/default/_form_delete.html.twig
@@ -7,7 +7,9 @@
     </div>
     {{ form_start(form) }}
     <div class="box-body">
-        {{ form_widget(form) }}
+        {% block form_body %}
+            {{ form_widget(form) }}
+        {% endblock %}
     </div>
     <div class="box-footer">
         <input type="submit" value="{{ 'action.delete'|trans }}" class="btn btn-danger" />
diff --git a/templates/default/_form_modal.html.twig b/templates/default/_form_modal.html.twig
index 367204ff..ab773c97 100644
--- a/templates/default/_form_modal.html.twig
+++ b/templates/default/_form_modal.html.twig
@@ -1,18 +1,39 @@
-{% 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="{{ form.vars.docu_chapter|docu_link }}" target="_blank"><i class="{{ 'help'|icon }}"></i></a>
-        {% endif %}
-    {% endblock %}
-    {% block modal_body %}
-        {{ form_widget(form) }}
-    {% endblock %}
-    {% block modal_footer %}
-        <button type="submit" class="btn btn-primary pull-left modal-form-save" data-loading-text="{{ 'action.save'|trans }}..." id="{{ block('modal_id') }}_save">{{ 'action.save'|trans }}</button>
-        <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">{{ 'action.close'|trans }}</button>
-    {% endblock %}
-    {% block modal_end %}{{ form_end(form) }}{% endblock %}
-{% endembed %}
+{# 
+REQUIRED CHANGES NEED TO BE DONE IN THESE FILES:
+ - embeds/modal.html.twig 
+ - default/_form_modal.html.twig 
+ #}
+<div class="modal {% block modal_class %}{% endblock %}" id="{% block modal_id %}form_modal{% endblock %}" tabindex="-1" role="dialog" aria-labelledby="{{ block('modal_id') }}_label">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            {% block form_before %}{% endblock %}
+            {% block modal_before %}{{ form_start(form) }}{% endblock %}
+            <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 %}
+                        {{ title }}
+                        {% if form.vars.docu_chapter is defined and form.vars.docu_chapter is not empty %}
+                            <a href="{{ form.vars.docu_chapter|docu_link }}" target="_blank"><i class="{{ 'help'|icon }}"></i></a>
+                        {% endif %}
+                    {% endblock %}
+                </h4>
+            </div>
+            <div class="modal-body">
+                {% block modal_body %}
+                    {% block form_body %}
+                        {{ form_widget(form) }}
+                    {% endblock %}
+                {% endblock %}
+            </div>
+            <div class="modal-footer">
+                {% block modal_footer %}
+                    <button type="submit" class="btn btn-primary pull-left modal-form-save" data-loading-text="{{ 'action.save'|trans }}..." id="{{ block('modal_id') }}_save">{{ 'action.save'|trans }}</button>
+                    <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">{{ 'action.close'|trans }}</button>
+                {% endblock %}
+            </div>
+            {% block modal_end %}{{ form_end(form) }}{% endblock %}
+            {% block form_after %}{% endblock %}
+        </div>
+    </div>
+</div>
diff --git a/templates/embeds/modal.html.twig b/templates/embeds/modal.html.twig
index 932c075f..c2e3e6d8 100644
--- a/templates/embeds/modal.html.twig
+++ b/templates/embeds/modal.html.twig
@@ -1,3 +1,8 @@
+{# 
+REQUIRED CHANGES NEED TO BE DONE IN THESE FILES:
+ - embeds/modal.html.twig 
+ - default/_form_modal.html.twig 
+ #}
 <div class="modal{% if block('modal_class') is defined %} {{ block('modal_class') }}{% endif %}" 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">
diff --git a/templates/form/kimai-theme.html.twig b/templates/form/kimai-theme.html.twig
index 8922c110..7e7bcb75 100644
--- a/templates/form/kimai-theme.html.twig
+++ b/templates/form/kimai-theme.html.twig
@@ -18,4 +18,17 @@
 
         {{ block('form_widget_simple') }}
     </div>
-{% endblock daterange_widget %}
\ No newline at end of file
+{% endblock daterange_widget %}
+
+{% block datetime_widget -%}
+    {%- if widget == 'single_text' -%}
+        <div class="input-group">
+            <div class="input-group-addon">
+                <a href="#" onclick="$('#{{ id }}').val(moment().format('{{ attr['data-format'] }}')).trigger('change')"><i class="fa fa-calendar-alt"></i></a>
+            </div>
+            {{ block('form_widget_simple') }}
+        </div>
+    {%- else -%}
+        {{ block('form_widget_simple') }}
+    {%- endif -%}
+{%- endblock datetime_widget %}
diff --git a/templates/timesheet/edit.html.twig b/templates/timesheet/edit.html.twig
index 731406e0..25a5712d 100644
--- a/templates/timesheet/edit.html.twig
+++ b/templates/timesheet/edit.html.twig
@@ -9,9 +9,180 @@
     {% if timesheet.exported %}
         {{ widgets.alert('warning', ('timesheet.locked.warning'|trans({}, 'flashmessages')), ('warning'|trans({}, 'flashmessages')), 'warning') }}
     {% endif %}
-    {{ include(app.request.xmlHttpRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig', {
+    {% set formEditTemplate = app.request.xmlHttpRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig' %}
+    {% set formOptions = {
         'title': (timesheet.id ? 'timesheet.edit'|trans : 'create'|trans),
         'form': form,
         'back': path('timesheet')
-    }) }}
+    } %}
+    {% embed formEditTemplate with formOptions %}
+        {% set length = 6 %}
+        {% if form.begin is defined and form.end is defined and form.duration is defined %}
+            {% set length = 5 %}
+        {% elseif form.begin is defined and form.end is defined and form.duration is not defined %}
+            {% set length = 6 %}
+        {% elseif form.begin is defined and form.end is not defined and form.duration is defined %}
+            {% set length = 10 %}
+        {% elseif form.begin is not defined and form.end is defined and form.duration is defined %}
+            {% set length = 10 %}
+        {% endif %}
+        {% block form_body %}
+            {% if form.begin is defined or form.end is defined or form.duration is defined %}
+            <div class="row">
+                {% if form.begin is defined %}
+                    <div class="col-md-{{ length }}">
+                        {{ form_row(form.begin) }}
+                    </div>
+                {% endif %}
+                {% if form.end is defined %}
+                    <div class="col-md-{{ length }}">
+                        {{ form_row(form.end) }}
+                    </div>
+                {% endif %}
+                {% if form.duration is defined %}
+                    <div class="col-md-2">
+                        {{ form_row(form.duration) }}
+                    </div>
+                {% endif %}
+            </div>
+            {% endif %}
+            {{ form_widget(form) }}
+        {% endblock %}
+        {% block form_after %}
+            {% if form.begin is defined and form.end is defined and form.duration is defined %}
+                <script type="text/javascript">
+                    $('body').on('blur change', '#timesheet_edit_form_begin', function(ev) {
+                        changedBegin($(this).val());
+                    });
+
+                    $('body').on('blur change', '#timesheet_edit_form_end', function(ev) {
+                        changedEnd($(this).val());
+                    });
+
+                    $('body').on('blur change', '#timesheet_edit_form_duration', function(ev) {
+                        changedDuration($(this).val());
+                    });
+                    
+                    {#
+                        Ruleset: 
+                        - invalid begin => skip
+                        - empty end => set end to begin (only if duration > 0 = running record)
+                        - invalid end => skip
+                        - calculate duration 
+                    #}
+                    function changedBegin(value)
+                    {
+                        var endField = document.getElementById('timesheet_edit_form_end');
+                        var durationField = document.getElementById('timesheet_edit_form_duration');
+                        var format = endField.dataset.format;
+                        var momentDuration = moment.duration(durationField.value);
+
+                        var momentBegin = moment(value, format);
+                        if (!momentBegin.isValid()) {
+                            return;
+                        }
+                        
+                        if (endField.value === '' && momentDuration.asSeconds() > 0) {
+                            endField.value = value;
+                        }
+
+                        var momentEnd = moment(endField.value, format);
+                        if (!momentEnd.isValid()) {
+                            return;
+                        }
+                        
+                        if (momentEnd.isBefore(momentBegin)) {
+                            endField.value = momentBegin.add(momentDuration).format(format);
+                        }
+
+                        momentBegin = moment(value, format);
+                        momentEnd = moment(endField.value, format);
+                        
+                        var durationMoment = moment.duration(momentEnd.diff(momentBegin));
+                        var hours = Math.floor(durationMoment.asHours());
+                        if (hours < 10) {
+                            hours = '0' + hours;
+                        }
+                        
+                        durationField.value = hours + ':' + ('0' + durationMoment.minutes()).slice(-2);
+                    }
+
+                    {#
+                        Ruleset: 
+                        - invalid end => skip
+                        - empty begin => set begin to end
+                        - invalid begin => skip
+                        - calculate duration 
+                    #}
+                    function changedEnd(value)
+                    {
+                        var beginField = document.getElementById('timesheet_edit_form_begin');
+                        var durationField = document.getElementById('timesheet_edit_form_duration');
+                        var format = beginField.dataset.format;
+                        var momentDuration = moment.duration(durationField.value);
+
+                        var momentEnd = moment(value, format);
+                        if (!momentEnd.isValid()) {
+                            return;
+                        }
+
+                        if (beginField.value === '') {
+                            beginField.value = value;
+                        }
+
+                        var momentBegin = moment(beginField.value, format);
+                        if (!momentBegin.isValid()) {
+                            return;
+                        }
+
+                        if (momentEnd.isBefore(momentBegin)) {
+                            beginField.value = momentEnd.subtract(momentDuration).format(format);
+                        }
+
+                        momentBegin = moment(beginField.value, format);
+                        momentEnd = moment(value, format);
+
+                        var durationMoment = moment.duration(momentEnd.diff(momentBegin));
+                        var hours = Math.floor(durationMoment.asHours());
+                        if (hours < 10) {
+                            hours = '0' + hours;
+                        }
+                        
+                        durationField.value = hours + ':' + ('0' + durationMoment.minutes()).slice(-2);
+                    }
+
+                    {#
+                        Ruleset: 
+                        - invalid duration => skip
+                        - if begin and end are empty: set begin to now and end to duration
+                        - if begin is empty and end is not empty: set begin to end minus duration
+                        - if begin is not empty and end is empty and duration is > 0 (running records = 0): set end to begin plus duration
+                    #}
+                    function changedDuration(value)
+                    {
+                        var momentDuration = moment.duration(value);
+                        if (!momentDuration.isValid()) {
+                            return;
+                        }
+                        
+                        var beginField = document.getElementById('timesheet_edit_form_begin');
+                        var endField = document.getElementById('timesheet_edit_form_end');
+                        var format = endField.dataset.format;
+                        var begin = beginField.value;
+                        var end = endField.value;
+                        var duration = momentDuration.asSeconds();
+
+                        if (begin === '' && end === '') {
+                            beginField.value = moment().format(format); 
+                            endField.value = moment(beginField.value, format).add(duration, 'seconds').format(format); 
+                        } else if (begin === '' && end !== '') {
+                            beginField.value = moment(end, format).subtract(duration, 'seconds').format(format);
+                        } else if (begin !== '' && duration > 0) {
+                            endField.value = moment(beginField.value, format).add(duration, 'seconds').format(format); 
+                        }
+                    }
+                </script>
+            {% endif %}
+        {% endblock %}
+    {% endembed %}
 {% endblock %}
diff --git a/tests/API/ProjectControllerTest.php b/tests/API/ProjectControllerTest.php
index af3ee85b..d936f9de 100644
--- a/tests/API/ProjectControllerTest.php
+++ b/tests/API/ProjectControllerTest.php
@@ -282,7 +282,7 @@ class ProjectControllerTest extends APIControllerBaseTest
 
         if ($full) {
             $expectedKeys = array_merge($expectedKeys, [
-                'comment', 'budget', 'timeBudget', 'orderNumber'
+                'comment', 'budget', 'timeBudget', 'orderNumber', 'orderDate'
             ]);
         }
 
diff --git a/tests/Invoice/Renderer/DebugRendererTest.php b/tests/Invoice/Renderer/DebugRendererTest.php
index e6b238a3..ca0a9f9f 100644
--- a/tests/Invoice/Renderer/DebugRendererTest.php
+++ b/tests/Invoice/Renderer/DebugRendererTest.php
@@ -101,6 +101,7 @@ class DebugRendererTest extends TestCase
                 'project.id',
                 'project.name',
                 'project.comment',
+                'project.order_date',
                 'project.order_number',
                 'project.fixed_rate',
                 'project.hourly_rate',