toolbar dropdown and visibility improvements (#933)

assets/js/plugins/KimaiAjaxModalForm.js

@@ -89,9 +89,6 @@ export default class KimaiAjaxModalForm extends KimaiClickHandlerReducedInTableR
                 jQuery(html).find('#form_modal .modal-content')
             );
 
-            // TODO these should be handled with Events, probably using Custom Events
-            // https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
-
             // activate new loaded widgets
             self.getContainer().getPlugin('date-time-picker').activateDateTimePicker(formIdentifier);
             self.getContainer().getPlugin('autocomplete').activateAutocomplete(formIdentifier + " .js-autocomplete");

assets/js/plugins/KimaiDatatable.js

@@ -47,7 +47,6 @@ export default class KimaiDatatable extends KimaiPlugin {
     }
 
     reloadDatatable() {
-        // FIXME remove query
         const durations = this.getContainer().getPlugin('timesheet-duration');
         const form = jQuery('.toolbar form');
         let loading = '<div class="overlay"><i class="fas fa-sync fa-spin"></i></div>';

assets/js/plugins/KimaiSelectDataAPI.js

@@ -67,10 +67,44 @@ export default class KimaiSelectDataAPI extends KimaiPlugin {
             select.append('<option value="">' + emptyOption.text() + '</option>');
         }
 
-        jQuery.each(data, function(i, obj) {
-            select.append('<option value="' + obj.id + '">' + obj.name + '</option>');
+        const options = {};
+        for (const apiData of data) {
+            let title = apiData.parentTitle;
+            if (title === null) {
+                title = '__empty__';
+            }
+            if (!options.hasOwnProperty(title)) {
+                options[title] = [];
+            }
+            options[title].push(apiData);
+        }
+
+        const ordered = {};
+        Object.keys(options).sort().forEach(function(key) {
+            ordered[key] = options[key];
         });
 
+        let htmlOptions = '';
+        let emptyOptions = '';
+
+        for (const [key, value] of Object.entries(ordered)) {
+            if (key === '__empty__') {
+                for (const entity of value) {
+                    emptyOptions +=  '<option value="' + entity.id + '">' + entity.name + '</option>';
+                }
+                continue;
+            }
+
+            htmlOptions += '<optgroup label="' + key + '">';
+            for (const entity of value) {
+                htmlOptions +=  '<option value="' + entity.id + '">' + entity.name + '</option>';
+            }
+            htmlOptions += '</optgroup>';
+        }
+
+        select.append(htmlOptions);
+        select.append(emptyOptions);
+
         // if we don't trigger the change, the other selects won't be resetted
         select.trigger('change');