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;
}
}
.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"
],
"css": [
"build/app.8e8f1a48.css"
"build/app.fb1d5bab.css"
]
},
"invoice": {
@@ -54,7 +54,7 @@
"build/0.9ec1fb96.js": "sha384-1dI1TIwKkV71L1OH+DnDqaG1su73sfoXwMVzfTuAEIg0HgVImtDf01RtbASXV7yK",
"build/1.2890d91a.js": "sha384-r7OpYErcdJM7NmHiLm3n6J144cfkYc57YYAKn/QabksGh/Rd+tpcy6/kLwpVSD0b",
"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.13d8ef4e.css": "sha384-B6RN/wZJToSBCZk2JeLokIqWEhbh+Eb9arYbt9dM+YoC2Z6PnCeTwTqSGyexWWJh",
"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/1.2890d91a.js": "build/1.2890d91a.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/calendar.css": "build/calendar.1408f57e.css",
"build/calendar.js": "build/calendar.070aab88.js",

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

@@ -12,27 +12,27 @@
<div class="row">
{% set hasDragAndDrop = (dragAndDrop is not empty and (dragAndDrop|filter(s => s.entries|length > 0)|length > 0)) %}
{% if hasDragAndDrop %}
<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) %}
{% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
{% block box_title %}{{ source.title|trans }}{% endblock %}
{% block box_body_class %}drag-and-drop-source{% endblock %}
{% 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') }}">
{% 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') }}">
{% 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) }}
{% else %}
<span class="title">{{ entry.title }}</span>
{% endif %}
</div>
{% endfor %}
</div>
{% endblock %}
{% endembed %}
{% endfor %}
</div>
<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) %}
{% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
{% block box_title %}{{ source.title|trans }}{% endblock %}
{% block box_body_class %}drag-and-drop-source{% endblock %}
{% 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') }}">
{% 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') }}">
{% 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) }}
{% else %}
<span class="title">{{ entry.title }}</span>
{% endif %}
</div>
{% endfor %}
</div>
{% endblock %}
{% endembed %}
{% endfor %}
</div>
{% 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)
{
{# 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">' +
'<ul>' +
'<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 () {
{# FullCalendar 3 can only work with jQuery UI elements #}
jQuery(this).draggable({
@@ -207,15 +198,17 @@
let kimai = event.detail.kimai;
let API = kimai.getPlugin('api');
jQuery('{{ calendarSelector }}').fullCalendar({
themeSystem: 'bootstrap3',
defaultView: '{{ app.user.getPreferenceValue('calendar.initial_view') }}',
{% if google is not null %}
googleCalendarApiKey: '{{ google.apiKey }}',
{% endif %}
header : {
left : 'prev,next today',
left : 'prev,next today{% if is_granted('delete_own_timesheet') %} deleteButton{% endif %}',
center: 'title',
right : 'month,agendaWeek,agendaDay'
},
dragRevertDuration: 0,
eventLimit: {{ config.dayLimit }},
weekNumbersWithinDays: true,
weekNumberCalculation: 'ISO',
@@ -224,12 +217,14 @@
navLinks: true,
locale: kimai.getConfiguration().get('locale').replace('_', '-').toLowerCase(),
firstDay: kimai.getConfiguration().get('first_dow_iso'),
{#
// TODO calculate height properly instead of relying on the default aspectRatio
height: function() {
return 'parent';
customButtons: {
deleteButton: {
text: '{{ 'action.delete'|trans }}',
click: function() {
kimai.getPlugin('alert').info('{{ 'calendar.drag_and_drop.delete'|trans }}');
}
}
},
#}
height: 'auto',
nowIndicator: true,
now: '{{ now|date_format('c') }}',
@@ -344,11 +339,11 @@
{% endif %}
],
eventRender: function(eventObj, $el) {
// don't show popover for google calendar
{# don't show popover for google calendar #}
if (eventObj.source.ajaxSettings !== undefined) {
return;
}
// or when an event is dragged or resized
{# or when an event is dragged or resized #}
if (!showPopover()) {
return;
}
@@ -364,9 +359,11 @@
},
{% if not is_punch_mode and is_granted('create_own_timesheet') %}
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
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') {
return;
}
@@ -377,8 +374,10 @@
selectable: true,
select: function(start, end, jsEvent, view) {
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;
}
let createUrl = '{{ path('timesheet_create') }}' + '?from=' + start.format() + '&to=' + end.format();
@@ -395,24 +394,44 @@
kimai.getPlugin('modal').openUrlInModal(editUrl);
},
{% if not is_punch_mode %}
editable: true,
eventDragStart: function(event, jsEvent, ui, view) {
deactivatePopover();
},
eventDragStop: function(event, jsEvent, ui, view) {
activatePopover();
},
eventDrop: changeHandler,
eventResizeStart: function(event, jsEvent, ui, view) {
deactivatePopover();
},
eventResizeStop: function(event, jsEvent, ui, view) {
activatePopover();
},
eventResize: changeHandler,
editable: true,
eventDragStart: function(event, jsEvent, ui, view) {
deactivatePopover();
},
eventDragStop: function(event, jsEvent, ui, view) {
activatePopover();
{% if is_granted('delete_own_timesheet') %}
var trash = jQuery('.fc-deleteButton-button');
var offset = trash.offset();
if (jsEvent.pageX >= offset.left && jsEvent.pageX<= (offset.left + trash.outerWidth(true)) &&
jsEvent.pageY >= offset.top && jsEvent.pageY <= (offset.top + trash.outerHeight(true))) {
// FIXME confirm delete
API.delete(
'{{ 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 %}
})
});
var trashBtn = jQuery('.fc-deleteButton-button');
trashBtn.html('<span class="text-danger"><i class="{{ 'trash'|icon }} text-danger"></i> ' + trashBtn.text() + '</span>');
});
</script>
{% endblock %}

46
translations/messages.de.xlf
View File

@@ -589,22 +589,26 @@
<target>Browser Titel aktualisieren</target>
</trans-unit>
<!--
User timesheet calendar
-->
User timesheet calendar
-->
<trans-unit id="calendar.title">
<source>calendar.title</source>
<target>Kalender</target>
</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">
<source>admin_timesheet.title</source>
<target>Zeiterfassung</target>
</trans-unit>
<!--
Admin: Projects
-->
Admin: Projects
-->
<trans-unit id="admin_project.title">
<source>admin_project.title</source>
<target>Projekte</target>
@@ -612,9 +616,9 @@
<trans-unit id="admin_project.short_stats">
<source>admin_project.short_stats</source>
<target>
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.
</target>
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.
</target>
</trans-unit>
<trans-unit id="label.project_start">
<source>label.project_start</source>
@@ -625,8 +629,8 @@
<target>Projekt Ende</target>
</trans-unit>
<!--
Admin: Activity
-->
Admin: Activity
-->
<trans-unit id="admin_activity.title">
<source>admin_activity.title</source>
<target>Tätigkeiten</target>
@@ -634,13 +638,13 @@
<trans-unit id="admin_activity.short_stats">
<source>admin_activity.short_stats</source>
<target>
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.
</target>
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.
</target>
</trans-unit>
<!--
Admin: Customer
-->
Admin: Customer
-->
<trans-unit id="admin_customer.title">
<source>admin_customer.title</source>
<target>Kunden</target>
@@ -704,9 +708,9 @@
<trans-unit id="admin_customer.short_stats">
<source>admin_customer.short_stats</source>
<target>
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.
</target>
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.
</target>
</trans-unit>
<!--
Admin: User
@@ -738,8 +742,8 @@
<trans-unit id="admin_user.short_stats">
<source>admin_user.short_stats</source>
<target>
Momentan existieren für den Benutzer %user% insgesamt %records% Zeiteinträge, welche sich auf eine Gesamtdauer von %duration% belaufen.
</target>
Momentan existieren für den Benutzer %user% insgesamt %records% Zeiteinträge, welche sich auf eine Gesamtdauer von %duration% belaufen.
</target>
</trans-unit>
<trans-unit id="user_permissions.title">
<source>user_permissions.title</source>

6
translations/messages.en.xlf
View File

@@ -603,7 +603,10 @@
<source>calendar.title</source>
<target>Calendar</target>
</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
-->
@@ -611,7 +614,6 @@
<source>admin_timesheet.title</source>
<target>Timesheets</target>
</trans-unit>
<!--
Admin: Projects
-->