added project start and end date (#1303)

* added sortable js library
* activity in invoice is optional
* added javascript widget for paginated boxes
* fix activity dropdown for globals only
* added timesheet service to reduce code duplication
* use repository to query for teams in dropdowns
* added project validator
* validate project start and end against timesheet
* include begin and end in dynamic form requests for projects
* added timezone and language option to import flag, improve timesheet import speed
* deactivate cross-timezone filter
* add virtual fields to field order list
* composer update
* added param to ignore dates
* position loader icon fixed - fixes #1330
* permission problem when creating a new project - fixes #1340
* remove dev dependencies webserver and thanks bundle
* stop information leak (begin and end date) in duration mode - fixes #1307
* unify timesheet edit dialog for user and admins
* fix security issue, own rates exposed to unauthorized users in multi-update dialog

assets/app.js

@@ -11,6 +11,7 @@ global.$ = global.jQuery = $;
 
 require('bootstrap-sass');
 require('jquery-slimscroll');
+
 require('select2');
 require('select2/dist/js/i18n/ar');
 require('select2/dist/js/i18n/cs');
@@ -53,6 +54,9 @@ require('moment/locale/zh-cn');
 
 require('daterangepicker');
 
+const Sortable = require('sortablejs/Sortable.min');
+global.Sortable = Sortable;
+
 // ------ AdminLTE framework ------
 require('./sass/admin-lte.scss');
 require('admin-lte/dist/css/AdminLTE.min.css');
@@ -69,6 +73,7 @@ require('./sass/app.scss');
 
 // ------ Kimai itself ------
 require('./js/KimaiWebLoader.js');
+global.KimaiPaginatedBoxWidget = require('./js/widgets/KimaiPaginatedBoxWidget').default;
 
 // ------ Autocomplete for tags only ------
 require('jquery-ui/ui/widgets/autocomplete');

assets/js/plugins/KimaiDateRangePicker.js

@@ -61,6 +61,8 @@ export default class KimaiDateRangePicker extends KimaiPlugin {
 
             jQuery(this).on('apply.daterangepicker', function(ev, picker) {
                 jQuery(this).val(picker.startDate.format(localeFormat) + ' - ' + picker.endDate.format(localeFormat));
+                jQuery(this).data('begin', picker.startDate.format(localeFormat));
+                jQuery(this).data('end', picker.endDate.format(localeFormat));
                 jQuery(this).trigger("change");
             });
         });

assets/js/plugins/KimaiSelectDataAPI.js

@@ -11,6 +11,7 @@
 
 import jQuery from 'jquery';
 import KimaiPlugin from "../KimaiPlugin";
+import moment from 'moment';
 
 export default class KimaiSelectDataAPI extends KimaiPlugin {
 
@@ -32,30 +33,78 @@ export default class KimaiSelectDataAPI extends KimaiPlugin {
         const API = this.getContainer().getPlugin('api');
 
         jQuery('body').on('change', selector, function(event) {
-            let apiUrl = jQuery(this).attr('data-api-url').replace('-s-', jQuery(this).val());
-            const targetSelect = '#' + jQuery(this).attr('data-related-select');
+            const targetSelect = '#' + this.dataset['relatedSelect'];
 
             // if the related target select does not exist, we do not need to load the related data
             if (jQuery(targetSelect).length === 0) {
                 return;
             }
 
+            let formPrefix = jQuery(this).parents('form').first().attr('name');
+            if (formPrefix === undefined || formPrefix === null) {
+                formPrefix = '';
+            } else {
+                formPrefix += '_';
+            }
+            
+            let newApiUrl = self._buildUrlWithFormFields(this.dataset['apiUrl'], formPrefix);
+
             if (jQuery(this).val() === '') {
-                if (jQuery(this).attr('data-empty-url') === undefined) {
+                if (this.dataset['emptyUrl'] === undefined) {
                     self._updateSelect(targetSelect, {});
                     jQuery(targetSelect).attr('disabled', 'disabled');
                     return;
                 }
-                apiUrl = jQuery(this).attr('data-empty-url').replace('-s-', jQuery(this).val());
+                newApiUrl = self._buildUrlWithFormFields(this.dataset['emptyUrl'], formPrefix);
             }
 
             jQuery(targetSelect).removeAttr('disabled');
 
-            API.get(apiUrl, {}, function(data){
+            API.get(newApiUrl, {}, function(data){
                 self._updateSelect(targetSelect, data);
             });
         });
     }
+    
+    _buildUrlWithFormFields(apiUrl, formPrefix) {
+        let newApiUrl = apiUrl;
+
+        apiUrl.split('?')[1].split('&').forEach(item => {
+            let [key, value] = item.split('=');
+            let decoded = decodeURIComponent(value);
+            let test = decoded.match(/%(.*)%/);
+            if (test !== null) {
+                let targetField = jQuery('#' + formPrefix + test[1]);
+                let newValue = '';
+                if (targetField.length === 0) {
+                    // debug: this case for example happens in duration only mode, when the end field is not found
+                    //console.log('ERROR: Cannot find field with name "' + test[1] + '" by selector: #' + formPrefix + test[1]);
+                } else {
+                    if (targetField.val() !== null) {
+                        newValue = targetField.val();
+                        
+                        if (newValue !== '') {
+                            // having that special case here is far from being perfect... but for now it works ;-)
+                            if (targetField.data('daterangepicker') !== undefined) {
+                                if (key === 'begin' || key === 'start' || targetField.data('daterangepicker').singleDatePicker) {
+                                    newValue = targetField.data('daterangepicker').startDate.format(moment.HTML5_FMT.DATETIME_LOCAL_SECONDS);
+                                } else if (key === 'end') {
+                                    newValue = targetField.data('daterangepicker').endDate.format(moment.HTML5_FMT.DATETIME_LOCAL_SECONDS);
+                                }
+                            } else if (targetField.data('format') !== undefined) {
+                                if (moment(newValue, targetField.data('format')).isValid()) {
+                                    newValue = moment(newValue, targetField.data('format')).format(moment.HTML5_FMT.DATETIME_LOCAL_SECONDS);
+                                }
+                            } 
+                        }
+                    }
+                }
+                newApiUrl = newApiUrl.replace(value, newValue);
+            }
+        });
+
+        return newApiUrl;
+    }
 
     _updateSelect(selectName, data) {
         const options = {};

assets/js/widgets/KimaiPaginatedBoxWidget.js

@@ -0,0 +1,92 @@
+/*
+ * This file is part of the Kimai time-tracking app.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+/*!
+ * [KIMAI] KimaiPaginatedBoxWidget: handles box widgets that have a pagination
+ */
+
+import jQuery from "jquery";
+
+export default class KimaiPaginatedBoxWidget {
+
+    constructor(boxId) {
+        this.selector = boxId;
+        this.overlay = jQuery('<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>');
+        this.widget = jQuery(this.selector);
+        this.href = this.widget.data('href');
+        this.events = this.widget.data('reload').split(' ');
+
+        const self = this;
+
+        const reloadPage = function (event) {
+            const page = jQuery(self.selector + ' .box-tools').data('page');
+            const url = self._buildUrl(page);
+            self.loadPage(url);
+        };
+
+        for (const eventName of this.events) {
+            document.addEventListener(eventName, reloadPage);
+        }
+
+        this.widget.on('click', '.box-tools a', function (event) {
+            event.preventDefault();
+            self.loadPage(jQuery(event.target).attr('href'));
+        });
+    }
+    
+    static create(elementId) {
+        return new KimaiPaginatedBoxWidget(elementId);
+    }
+    
+    _showOverlay() {
+        this.widget.append(this.overlay);
+    }
+    
+    _hideOverlay() {
+        jQuery(this.overlay).remove();
+    }
+    
+    loadPage(url) {
+        const self = this;
+        const selector = this.selector;
+        
+        self._showOverlay();
+
+        jQuery.ajax({
+            url: url,
+            data: {},
+            success: function (response) {
+                const html = jQuery(response);
+                jQuery(selector + ' .box-tools').replaceWith(html.find('.box-tools'));
+                jQuery(selector + ' .box-body').replaceWith(html.find('.box-body'));
+                self.widget.removeData('error-retry');
+                self._hideOverlay();
+            },
+            dataType: 'html',
+            error: function(jqXHR, textStatus, errorThrown) {
+                if (jqXHR.status !== undefined && jqXHR.status === 500) {
+                    if (self.widget.data('error-retry') !== undefined) {
+                        // TODO show error message ?
+                        return;
+                    }
+                    const page = jQuery(selector + ' .box-tools').data('page');
+                    if (page > 1) {
+                        self.widget.data('error-retry', 1);
+                        var url = self._buildUrl(page - 1);
+                        self.loadPage(url);
+                    }
+                }
+                self._hideOverlay();
+            }
+        });        
+    }
+    
+    _buildUrl(page) {
+        return this.href.replace('1', page);
+    }
+    
+}

assets/sass/datatable.scss

@@ -23,7 +23,7 @@ section.content .overlay > .fas,
 section.content > .overlay,
 .box > .loading-img,
 .overlay-wrapper > .loading-img {
-    position: absolute;
+    position: fixed; /* see #1330 */
     top: 0;
     left: 0;
     width: 100%;

assets/sass/sidebar.scss

@@ -39,3 +39,13 @@
         }
     }
 }
+
+/* 
+Simplify focus detection, when using keyboard tab navigation
+Deactivated, as it looks weird when the link is clicked 
+*/
+/*
+.sidebar-menu > li > a:focus {
+    text-decoration: underline;
+}
+*/