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

drag & drop to delete entries from the calendar (#2513)

Browse Source
This commit is contained in:
Kevin Papst
2021-04-20 14:50:23 +02:00
committed by GitHub
parent 7ddcde62dd
commit 08a144ac31
7 changed files with 126 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
assets/sass/calendar.scss
View File

@@ -32,3 +32,18 @@
border-left: 1px solid; border-left: 1px solid;
} }
} }
.fc-bootstrap3 {
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
border: 1px solid #ddd;
}
.fc-head {
background-color: #fafafa;
}
td.fc-today {
background-color: #fcf8e3!important;
}
}

2
public/build/app.8e8f1a48.css → public/build/app.fb1d5bab.css
View File

File diff suppressed because one or more lines are too long

4
public/build/entrypoints.json
View File

@@ -8,7 +8,7 @@
"build/app.2ee3c27f.js" "build/app.2ee3c27f.js"
], ],
"css": [ "css": [
"build/app.8e8f1a48.css" "build/app.fb1d5bab.css"
] ]
}, },
"invoice": { "invoice": {
@@ -54,7 +54,7 @@
"build/0.9ec1fb96.js": "sha384-1dI1TIwKkV71L1OH+DnDqaG1su73sfoXwMVzfTuAEIg0HgVImtDf01RtbASXV7yK", "build/0.9ec1fb96.js": "sha384-1dI1TIwKkV71L1OH+DnDqaG1su73sfoXwMVzfTuAEIg0HgVImtDf01RtbASXV7yK",
"build/1.2890d91a.js": "sha384-r7OpYErcdJM7NmHiLm3n6J144cfkYc57YYAKn/QabksGh/Rd+tpcy6/kLwpVSD0b", "build/1.2890d91a.js": "sha384-r7OpYErcdJM7NmHiLm3n6J144cfkYc57YYAKn/QabksGh/Rd+tpcy6/kLwpVSD0b",
"build/app.2ee3c27f.js": "sha384-YyGA9sqAqi7lk0IYrAj5E2CQZGZbMQuSCv2Auz7fbjxcuRJvh9hOWkV6r3qOJKNA", "build/app.2ee3c27f.js": "sha384-YyGA9sqAqi7lk0IYrAj5E2CQZGZbMQuSCv2Auz7fbjxcuRJvh9hOWkV6r3qOJKNA",
"build/app.8e8f1a48.css": "sha384-k9l5JFdLXPYnXgp8zIzSKC49AvFX5wDYx5+Pc7/NVMnOvnFUC0BzArW8H3mmGJPJ", "build/app.fb1d5bab.css": "sha384-b8s0budBJh3JWWMyOZ08KKAx/Ukl0GWMX/o5yD87UL5SAq5datSu8vuzTS0cnA6T",
"build/invoice.74279541.js": "sha384-2BXic5Sgorf2tXai6zSAN4wLY2dbg06L03/xMKW6itMcszvtnRArKzfBh6DNcF3f", "build/invoice.74279541.js": "sha384-2BXic5Sgorf2tXai6zSAN4wLY2dbg06L03/xMKW6itMcszvtnRArKzfBh6DNcF3f",
"build/invoice.13d8ef4e.css": "sha384-B6RN/wZJToSBCZk2JeLokIqWEhbh+Eb9arYbt9dM+YoC2Z6PnCeTwTqSGyexWWJh", "build/invoice.13d8ef4e.css": "sha384-B6RN/wZJToSBCZk2JeLokIqWEhbh+Eb9arYbt9dM+YoC2Z6PnCeTwTqSGyexWWJh",
"build/invoice-pdf.0efd7a97.js": "sha384-bSdIeRCtEJiYYuc2reb0e5CpJ1Kbd1lQNEkElMTiq1SX0IINzdwJJYf6WnCcHrNC", "build/invoice-pdf.0efd7a97.js": "sha384-bSdIeRCtEJiYYuc2reb0e5CpJ1Kbd1lQNEkElMTiq1SX0IINzdwJJYf6WnCcHrNC",

2
public/build/manifest.json
View File

@@ -2,7 +2,7 @@
"build/0.9ec1fb96.js": "build/0.9ec1fb96.js", "build/0.9ec1fb96.js": "build/0.9ec1fb96.js",
"build/1.2890d91a.js": "build/1.2890d91a.js", "build/1.2890d91a.js": "build/1.2890d91a.js",
"build/2.42abdacc.js": "build/2.42abdacc.js", "build/2.42abdacc.js": "build/2.42abdacc.js",
"build/app.css": "build/app.8e8f1a48.css", "build/app.css": "build/app.fb1d5bab.css",
"build/app.js": "build/app.2ee3c27f.js", "build/app.js": "build/app.2ee3c27f.js",
"build/calendar.css": "build/calendar.1408f57e.css", "build/calendar.css": "build/calendar.1408f57e.css",
"build/calendar.js": "build/calendar.070aab88.js", "build/calendar.js": "build/calendar.070aab88.js",

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

@@ -12,27 +12,27 @@
<div class="row"> <div class="row">
{% set hasDragAndDrop = (dragAndDrop is not empty and (dragAndDrop|filter(s => s.entries|length > 0)|length > 0)) %} {% set hasDragAndDrop = (dragAndDrop is not empty and (dragAndDrop|filter(s => s.entries|length > 0)|length > 0)) %}
{% if hasDragAndDrop %} {% if hasDragAndDrop %}
<div class="hidden-xs col-sm-5 col-md-4 col-lg-3 no-print"> <div class="hidden-xs col-sm-5 col-md-4 col-lg-3 no-print">
{% for source in dragAndDrop|filter(s => s.entries|length > 0) %} {% for source in dragAndDrop|filter(s => s.entries|length > 0) %}
{% embed '@AdminLTE/Widgets/box-widget.html.twig' %} {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
{% block box_title %}{{ source.title|trans }}{% endblock %} {% block box_title %}{{ source.title|trans }}{% endblock %}
{% block box_body_class %}drag-and-drop-source{% endblock %} {% block box_body_class %}drag-and-drop-source{% endblock %}
{% block box_body %} {% block box_body %}
<div class="external-events" data-method="{{ source.method }}" data-route="{{ path(source.route, source.routeParams) }}" data-route-replacer="{{ source.routeReplacer|json_encode|e('html_attr') }}"> <div class="external-events" data-method="{{ source.method }}" data-route="{{ path(source.route, source.routeParams) }}" data-route-replacer="{{ source.routeReplacer|json_encode|e('html_attr') }}">
{% for entry in source.entries %} {% for entry in source.entries %}
<div draggable="true" style="background-color: {{ entry.color }}; color: {{ entry.color|font_contrast }}" class="external-event ui-draggable ui-draggable-handle" data-entry="{{ entry.data|json_encode|e('html_attr') }}"> <div draggable="true" style="background-color: {{ entry.color }}; color: {{ entry.color|font_contrast }}" class="external-event ui-draggable ui-draggable-handle" data-entry="{{ entry.data|json_encode|e('html_attr') }}">
{% if source.blockInclude is not null and entry.blockName is not null and block(entry.blockName, source.blockInclude) is defined %} {% if source.blockInclude is not null and entry.blockName is not null and block(entry.blockName, source.blockInclude) is defined %}
{{ block(entry.blockName, source.blockInclude) }} {{ block(entry.blockName, source.blockInclude) }}
{% else %} {% else %}
<span class="title">{{ entry.title }}</span> <span class="title">{{ entry.title }}</span>
{% endif %} {% endif %}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{% endblock %} {% endblock %}
{% endembed %} {% endembed %}
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
<div class="col-xs-12 {% if hasDragAndDrop %}col-sm-7 col-md-8 col-lg-9 col-print-12{% endif %}"> <div class="col-xs-12 {% if hasDragAndDrop %}col-sm-7 col-md-8 col-lg-9 col-print-12{% endif %}">
@@ -120,15 +120,6 @@
function renderEventPopoverContent(eventObj) function renderEventPopoverContent(eventObj)
{ {
{# https://stackoverflow.com/questions/26530076/fullcalendar-js-deleting-event-on-button-click #}
{#
$el.append('<div style="position: absolute; top: 0; right: 0;" class="pull-right closeon">X</div>');
$el.find('.closeon').on('click', function(closeEvent) {
console.log(closeEvent);
jQuery('{{ calendarSelector }}').fullCalendar('removeEvents',eventObj._id);
closeEvent.stopPropagation();
});
#}
return '<div class="calendar-entry">' + return '<div class="calendar-entry">' +
'<ul>' + '<ul>' +
'<li>' + '{{ 'label.customer'|trans }}: ' + eventObj.customer + '</li>' + '<li>' + '{{ 'label.customer'|trans }}: ' + eventObj.customer + '</li>' +
@@ -194,7 +185,7 @@
}); });
}); });
// convert HTML to draggable items {# convert HTML to draggable items #}
jQuery('.external-events .external-event').each(function () { jQuery('.external-events .external-event').each(function () {
{# FullCalendar 3 can only work with jQuery UI elements #} {# FullCalendar 3 can only work with jQuery UI elements #}
jQuery(this).draggable({ jQuery(this).draggable({
@@ -207,15 +198,17 @@
let kimai = event.detail.kimai; let kimai = event.detail.kimai;
let API = kimai.getPlugin('api'); let API = kimai.getPlugin('api');
jQuery('{{ calendarSelector }}').fullCalendar({ jQuery('{{ calendarSelector }}').fullCalendar({
themeSystem: 'bootstrap3',
defaultView: '{{ app.user.getPreferenceValue('calendar.initial_view') }}', defaultView: '{{ app.user.getPreferenceValue('calendar.initial_view') }}',
{% if google is not null %} {% if google is not null %}
googleCalendarApiKey: '{{ google.apiKey }}', googleCalendarApiKey: '{{ google.apiKey }}',
{% endif %} {% endif %}
header : { header : {
left : 'prev,next today', left : 'prev,next today{% if is_granted('delete_own_timesheet') %} deleteButton{% endif %}',
center: 'title', center: 'title',
right : 'month,agendaWeek,agendaDay' right : 'month,agendaWeek,agendaDay'
}, },
dragRevertDuration: 0,
eventLimit: {{ config.dayLimit }}, eventLimit: {{ config.dayLimit }},
weekNumbersWithinDays: true, weekNumbersWithinDays: true,
weekNumberCalculation: 'ISO', weekNumberCalculation: 'ISO',
@@ -224,12 +217,14 @@
navLinks: true, navLinks: true,
locale: kimai.getConfiguration().get('locale').replace('_', '-').toLowerCase(), locale: kimai.getConfiguration().get('locale').replace('_', '-').toLowerCase(),
firstDay: kimai.getConfiguration().get('first_dow_iso'), firstDay: kimai.getConfiguration().get('first_dow_iso'),
{# customButtons: {
// TODO calculate height properly instead of relying on the default aspectRatio deleteButton: {
height: function() { text: '{{ 'action.delete'|trans }}',
return 'parent'; click: function() {
kimai.getPlugin('alert').info('{{ 'calendar.drag_and_drop.delete'|trans }}');
}
}
}, },
#}
height: 'auto', height: 'auto',
nowIndicator: true, nowIndicator: true,
now: '{{ now|date_format('c') }}', now: '{{ now|date_format('c') }}',
@@ -344,11 +339,11 @@
{% endif %} {% endif %}
], ],
eventRender: function(eventObj, $el) { eventRender: function(eventObj, $el) {
// don't show popover for google calendar {# don't show popover for google calendar #}
if (eventObj.source.ajaxSettings !== undefined) { if (eventObj.source.ajaxSettings !== undefined) {
return; return;
} }
// or when an event is dragged or resized {# or when an event is dragged or resized #}
if (!showPopover()) { if (!showPopover()) {
return; return;
} }
@@ -364,9 +359,11 @@
}, },
{% if not is_punch_mode and is_granted('create_own_timesheet') %} {% if not is_punch_mode and is_granted('create_own_timesheet') %}
dayClick: function(date, jsEvent, view) { dayClick: function(date, jsEvent, view) {
{# day-clicks are always triggered, unless a selection was created. {#
Day-clicks are always triggered, unless a selection was created.
So clicking in a day (month view) or any slot (week and day view) will trigger a dayClick So clicking in a day (month view) or any slot (week and day view) will trigger a dayClick
BEFORE triggering a select - make sure not two create dialogs are requested #} BEFORE triggering a select - make sure not two create dialogs are requested
#}
if (view.type !== 'month') { if (view.type !== 'month') {
return; return;
} }
@@ -377,8 +374,10 @@
selectable: true, selectable: true,
select: function(start, end, jsEvent, view) { select: function(start, end, jsEvent, view) {
if(view.type === 'month') { if(view.type === 'month') {
{# multi-day clicks are NOT allowed in the month view, as simple day clicks would also trigger {#
a select - there is no way to distinguish a simple click and a two day selection #} Multi-day clicks are NOT allowed in the month view, as simple day clicks would also trigger
a select - there is no way to distinguish a simple click and a two day selection
#}
return; return;
} }
let createUrl = '{{ path('timesheet_create') }}' + '?from=' + start.format() + '&to=' + end.format(); let createUrl = '{{ path('timesheet_create') }}' + '?from=' + start.format() + '&to=' + end.format();
@@ -395,24 +394,44 @@
kimai.getPlugin('modal').openUrlInModal(editUrl); kimai.getPlugin('modal').openUrlInModal(editUrl);
}, },
{% if not is_punch_mode %} {% if not is_punch_mode %}
editable: true, editable: true,
eventDragStart: function(event, jsEvent, ui, view) { eventDragStart: function(event, jsEvent, ui, view) {
deactivatePopover(); deactivatePopover();
}, },
eventDragStop: function(event, jsEvent, ui, view) { eventDragStop: function(event, jsEvent, ui, view) {
activatePopover(); activatePopover();
}, {% if is_granted('delete_own_timesheet') %}
eventDrop: changeHandler, var trash = jQuery('.fc-deleteButton-button');
eventResizeStart: function(event, jsEvent, ui, view) { var offset = trash.offset();
deactivatePopover();
}, if (jsEvent.pageX >= offset.left && jsEvent.pageX<= (offset.left + trash.outerWidth(true)) &&
eventResizeStop: function(event, jsEvent, ui, view) { jsEvent.pageY >= offset.top && jsEvent.pageY <= (offset.top + trash.outerHeight(true))) {
activatePopover(); // FIXME confirm delete
}, API.delete(
eventResize: changeHandler, '{{ path('delete_timesheet', {'id': '__xxx__'}) }}'.replace('__xxx__', event.id),
function () {
kimai.getPlugin('alert').success('action.delete.success');
jQuery('{{ calendarSelector }}').fullCalendar('removeEvents', event._id);
}, function () {
kimai.getPlugin('alert').success('action.delete.error');
}
);
}
{% endif %}
},
eventDrop: changeHandler,
eventResizeStart: function(event, jsEvent, ui, view) {
deactivatePopover();
},
eventResizeStop: function(event, jsEvent, ui, view) {
activatePopover();
},
eventResize: changeHandler,
{% endif %} {% endif %}
{% endif %} {% endif %}
}) });
var trashBtn = jQuery('.fc-deleteButton-button');
trashBtn.html('<span class="text-danger"><i class="{{ 'trash'|icon }} text-danger"></i> ' + trashBtn.text() + '</span>');
}); });
</script> </script>
{% endblock %} {% endblock %}

46
translations/messages.de.xlf
View File

@@ -589,22 +589,26 @@
<target>Browser Titel aktualisieren</target> <target>Browser Titel aktualisieren</target>
</trans-unit> </trans-unit>
<!-- <!--
User timesheet calendar User timesheet calendar
--> -->
<trans-unit id="calendar.title"> <trans-unit id="calendar.title">
<source>calendar.title</source> <source>calendar.title</source>
<target>Kalender</target> <target>Kalender</target>
</trans-unit> </trans-unit>
<trans-unit id="calendar.drag_and_drop.delete">
<source>calendar.drag_and_drop.delete</source>
<target>Wenn Sie einen Eintrag löschen wollen, müssen Sie ihn auf die Schaltfläche ziehen.</target>
</trans-unit>
<!-- <!--
Admin: Timesheet Admin: Timesheet
--> -->
<trans-unit id="admin_timesheet.title"> <trans-unit id="admin_timesheet.title">
<source>admin_timesheet.title</source> <source>admin_timesheet.title</source>
<target>Zeiterfassung</target> <target>Zeiterfassung</target>
</trans-unit> </trans-unit>
<!-- <!--
Admin: Projects Admin: Projects
--> -->
<trans-unit id="admin_project.title"> <trans-unit id="admin_project.title">
<source>admin_project.title</source> <source>admin_project.title</source>
<target>Projekte</target> <target>Projekte</target>
@@ -612,9 +616,9 @@
<trans-unit id="admin_project.short_stats"> <trans-unit id="admin_project.short_stats">
<source>admin_project.short_stats</source> <source>admin_project.short_stats</source>
<target> <target>
Momentan existieren für das Projekt %project% des Kunden %customer% insgesamt %activities% Momentan existieren für das Projekt %project% des Kunden %customer% insgesamt %activities%
Tätigkeiten und %records% Zeiteinträge, welche sich auf eine Gesamtdauer von %duration% belaufen. Tätigkeiten und %records% Zeiteinträge, welche sich auf eine Gesamtdauer von %duration% belaufen.
</target> </target>
</trans-unit> </trans-unit>
<trans-unit id="label.project_start"> <trans-unit id="label.project_start">
<source>label.project_start</source> <source>label.project_start</source>
@@ -625,8 +629,8 @@
<target>Projekt Ende</target> <target>Projekt Ende</target>
</trans-unit> </trans-unit>
<!-- <!--
Admin: Activity Admin: Activity
--> -->
<trans-unit id="admin_activity.title"> <trans-unit id="admin_activity.title">
<source>admin_activity.title</source> <source>admin_activity.title</source>
<target>Tätigkeiten</target> <target>Tätigkeiten</target>
@@ -634,13 +638,13 @@
<trans-unit id="admin_activity.short_stats"> <trans-unit id="admin_activity.short_stats">
<source>admin_activity.short_stats</source> <source>admin_activity.short_stats</source>
<target> <target>
Momentan existieren für die Tätigkeit %activity% im Projekt %project% für den Kunden %customer% Momentan existieren für die Tätigkeit %activity% im Projekt %project% für den Kunden %customer%
insgesamt %records% Zeiteinträge, welche sich auf eine Gesamtdauer von %duration% belaufen. insgesamt %records% Zeiteinträge, welche sich auf eine Gesamtdauer von %duration% belaufen.
</target> </target>
</trans-unit> </trans-unit>
<!-- <!--
Admin: Customer Admin: Customer
--> -->
<trans-unit id="admin_customer.title"> <trans-unit id="admin_customer.title">
<source>admin_customer.title</source> <source>admin_customer.title</source>
<target>Kunden</target> <target>Kunden</target>
@@ -704,9 +708,9 @@
<trans-unit id="admin_customer.short_stats"> <trans-unit id="admin_customer.short_stats">
<source>admin_customer.short_stats</source> <source>admin_customer.short_stats</source>
<target> <target>
Momentan existieren für den Kunden %customer% insgesamt %project% Projekte mit %activity% Momentan existieren für den Kunden %customer% insgesamt %project% Projekte mit %activity%
Tätigkeiten, die sich in %records% Zeiteinträgen auf eine Gesamtdauer von %duration% belaufen. Tätigkeiten, die sich in %records% Zeiteinträgen auf eine Gesamtdauer von %duration% belaufen.
</target> </target>
</trans-unit> </trans-unit>
<!-- <!--
Admin: User Admin: User
@@ -738,8 +742,8 @@
<trans-unit id="admin_user.short_stats"> <trans-unit id="admin_user.short_stats">
<source>admin_user.short_stats</source> <source>admin_user.short_stats</source>
<target> <target>
Momentan existieren für den Benutzer %user% insgesamt %records% Zeiteinträge, welche sich auf eine Gesamtdauer von %duration% belaufen. Momentan existieren für den Benutzer %user% insgesamt %records% Zeiteinträge, welche sich auf eine Gesamtdauer von %duration% belaufen.
</target> </target>
</trans-unit> </trans-unit>
<trans-unit id="user_permissions.title"> <trans-unit id="user_permissions.title">
<source>user_permissions.title</source> <source>user_permissions.title</source>

6
translations/messages.en.xlf
View File

@@ -603,7 +603,10 @@
<source>calendar.title</source> <source>calendar.title</source>
<target>Calendar</target> <target>Calendar</target>
</trans-unit> </trans-unit>
<trans-unit id="calendar.drag_and_drop.delete">
<source>calendar.drag_and_drop.delete</source>
<target>If you want to delete an entry, you must drag it onto the button.</target>
</trans-unit>
<!-- <!--
Admin: Timesheet Admin: Timesheet
--> -->
@@ -611,7 +614,6 @@
<source>admin_timesheet.title</source> <source>admin_timesheet.title</source>
<target>Timesheets</target> <target>Timesheets</target>
</trans-unit> </trans-unit>
<!-- <!--
Admin: Projects Admin: Projects
--> -->