jjsm01/kimai2
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Edit and create timesheet records in modal (#603)

Browse Source 
- added loading indicator for datatables
- fix multiple reloads of datatable content
This commit is contained in:
Kevin Papst
2019-03-03 19:43:12 +01:00
committed by GitHub
parent 86832fb703
commit bea4be881b
23 changed files with 382 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
assets/js/kimai.js
View File

@@ -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 ====
$('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");
});
// ask before a delete call is executed
$('body').on('click', 'a.btn-trash', function (event) {
return confirm($.kimai.settings['confirmDelete']);
});
// ==== single select boxes in toolbars ====
$('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']
}
});
// compound field in toolbar
this.activateDateRangePicker('.content-wrapper');
$(this).on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format(localeFormat));
$(this).trigger("change");
});
});
// single select boxes in toolbars
this.activateDatePicker('.content-wrapper');
// ==== edit timesheet - date with time ====
$('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']
}
});
// edit timesheet - date with time
this.activateDateTimePicker('.content-wrapper');
$(this).on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format(localeFormat));
$(this).trigger("change");
});
});
// some actions can be performed in a modal for a better UX
this.activateAjaxFormInModal('a.modal-ajax-form');
$('select[data-related-select]').change(function() {
$('body').on('change', 'select[data-related-select]', function(event) {
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');
}
});
});
}
};

38
assets/js/toolbar.js
View File

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

39
assets/sass/datatable.scss
View File

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

2
public/build/app.css
View File

File diff suppressed because one or more lines are too long

4
public/build/app.js
View File

File diff suppressed because one or more lines are too long

4
public/build/manifest.json
View File

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

6
templates/admin/activity_edit.html.twig
View File

@@ -1,12 +1,10 @@
{% extends 'base.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}
{% import "macros/datatables.html.twig" as tables %}
{% extends app.request.xmlHttpRequest ? 'form.html.twig' : 'base.html.twig' %}
{% 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')

6
templates/admin/customer_edit.html.twig
View File

@@ -1,12 +1,10 @@
{% extends 'base.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}
{% import "macros/datatables.html.twig" as tables %}
{% extends app.request.xmlHttpRequest ? 'form.html.twig' : 'base.html.twig' %}
{% 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')

6
templates/admin/project_edit.html.twig
View File

@@ -1,12 +1,10 @@
{% extends 'base.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}
{% import "macros/datatables.html.twig" as tables %}
{% extends app.request.xmlHttpRequest ? 'form.html.twig' : 'base.html.twig' %}
{% 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')

4
templates/admin/timesheet.html.twig
View File

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

6
templates/admin/timesheet_edit.html.twig
View File

@@ -1,12 +1,10 @@
{% extends 'base.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}
{% import "macros/datatables.html.twig" as tables %}
{% extends app.request.xmlHttpRequest ? 'form.html.twig' : 'base.html.twig' %}
{% 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')

8
templates/base.html.twig
View File

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

11
templates/calendar/user.html.twig
View File

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

18
templates/default/_form_modal.html.twig Normal file
View File

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

18
templates/embeds/modal.html.twig Normal file
View File

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

20
templates/export/index.html.twig
View File

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

11
templates/form.html.twig Normal file
View File

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

6
templates/invoice/index.html.twig
View File

@@ -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-right">{{ entry.rate|money(model.calculator.currency) }}</td>
<td class="text-center text-nowrap">{{ duration }}</td>
<td class="text-right text-nowrap">{{ entry.rate|money(model.calculator.currency) }}</td>
</tr>
{% endfor %}
{{ tables.data_table_footer(entries) }}

99
templates/macros/widgets.html.twig
View File

@@ -3,54 +3,10 @@
{% endmacro %}
{%- macro page_actions(tools) -%}
{% import _self as macro %}
<div class="breadcrumb">
<div class="box-tools">
<div class="btn-group">
{%- 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>
{{ macro.button_group(tools) }}
</div>
</div>
{%- endmacro -%}
@@ -190,14 +146,57 @@
{% macro button_group(actions) %}
{% import _self as macro %}
<div class="btn-group">
{% for icon, url in actions %}
{{ macro.button_action(icon, url) }}
{% endfor %}
{%- for icon,values in actions %}
{% spaceless %}
{% 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 %}

6
templates/timesheet/edit.html.twig
View File

@@ -1,12 +1,10 @@
{% extends 'base.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}
{% import "macros/datatables.html.twig" as tables %}
{% extends app.request.xmlHttpRequest ? 'form.html.twig' : 'base.html.twig' %}
{% 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')

6
templates/timesheet/index.html.twig
View File

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

2
tests/Controller/Admin/TimesheetControllerTest.php
View File

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

2
tests/Controller/TimesheetControllerTest.php
View File

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