duration field in timesheet edit dialog (#1180)

This commit is contained in:
Kevin Papst
2019-10-24 23:46:22 +02:00
committed by GitHub
parent b0f83291ee
commit 1114538f41
11 changed files with 259 additions and 25 deletions

View File

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

View File

@@ -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'
]
]);
}

View File

@@ -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(),
]);

View File

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

View File

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

View File

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

View File

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

View File

@@ -18,4 +18,17 @@
{{ block('form_widget_simple') }}
</div>
{% endblock daterange_widget %}
{% 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 %}

View File

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

View File

@@ -282,7 +282,7 @@ class ProjectControllerTest extends APIControllerBaseTest
if ($full) {
$expectedKeys = array_merge($expectedKeys, [
'comment', 'budget', 'timeBudget', 'orderNumber'
'comment', 'budget', 'timeBudget', 'orderNumber', 'orderDate'
]);
}

View File

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