added search modal for timesheet export (#2728)

assets/js/plugins/KimaiAjaxModalForm.js

@@ -105,7 +105,7 @@ export default class KimaiAjaxModalForm extends KimaiReducedClickHandler {
 
         // load new form from given content
         if (jQuery(html).find('#form_modal .modal-content').length > 0) {
-            // switch classes, in case the modal type changed
+            // Support changing modal importance/types
             remoteModal.on('hidden.bs.modal', function () {
                 if (remoteModal.hasClass('modal-danger')) {
                     remoteModal.removeClass('modal-danger');
@@ -116,6 +116,16 @@ export default class KimaiAjaxModalForm extends KimaiReducedClickHandler {
                 remoteModal.addClass('modal-danger');
             }
 
+            // Support changing modal sizes
+            let modalDialog = remoteModal.find('.modal-dialog');
+            let largeModal = jQuery(html).find('.modal-dialog').hasClass('modal-lg');
+            if (largeModal && !modalDialog.hasClass('modal-lg')) {
+                modalDialog.addClass('modal-lg');
+            }
+            if (!largeModal && modalDialog.hasClass('modal-lg')) {
+                modalDialog.removeClass('modal-lg');
+            }
+
             jQuery('#remote_form_modal .modal-content').replaceWith(
                 jQuery(html).find('#form_modal .modal-content')
             );
@@ -155,7 +165,13 @@ export default class KimaiAjaxModalForm extends KimaiReducedClickHandler {
         form.on('change', this._isDirtyHandler);
 
         // click handler for modal save button, to send forms via ajax
-        form.on('submit', function(event){
+        form.on('submit', function(event) {
+            // if the form has a target, we let the normal HTML flow happen
+            if (form.attr('target') !== undefined) {
+                return true;
+            }
+
+            // otherwise we do some AJAX magic to process the form in the background
             const btn = jQuery(formIdentifier + ' button[type=submit]').button('loading');
             const eventName = form.attr('data-form-event');
             const events = self.getContainer().getPlugin('event');

assets/sass/app.scss

@@ -31,3 +31,4 @@
 @import 'progressbar';
 @import 'avatar';
 @import 'security';
+@import 'tabs';

assets/sass/modal.scss

@@ -1,3 +1,8 @@
+.modal-header,
+.modal-footer {
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
 .modal-content {
     border-radius: 3px;
     box-shadow: 0 10px 80px rgba(0, 0, 0, 0.6);

assets/sass/tabs.scss

@@ -0,0 +1,3 @@
+.tab-content {
+    margin-top: 20px;
+}