fix closing search dropdown (#1142)

* using a different library for javascript selects, fixing the closing search dropdown
* fix closing dropdown for daterangepicker
* added missing search button for mobile on customer page
* fix meta fields with same names than existing columns
This commit is contained in:
Kevin Papst
2019-09-25 18:34:25 +02:00
committed by GitHub
parent e45e782e7d
commit d661c8b54e
47 changed files with 389 additions and 136 deletions

View File

@@ -26,13 +26,19 @@ export default class KimaiFormSelect extends KimaiPlugin {
activateSelectPicker(selector, container) {
let options = {};
if (container !== undefined) {
options = {container: container};
options = {
dropdownParent: $(container),
};
}
jQuery(selector + ' ' + this.selector).selectpicker(options);
options = {...options, ...{
language: this.getContainer().getConfiguration().get('locale'),
theme: "bootstrap"
}};
jQuery(selector + ' ' + this.selector).select2(options);
}
destroySelectPicker(selector) {
jQuery(selector + ' ' + this.selector).selectpicker('destroy');
jQuery(selector + ' ' + this.selector).select2('destroy');
}
updateOptions(selectIdentifier, data) {
@@ -71,7 +77,7 @@ export default class KimaiFormSelect extends KimaiPlugin {
// if the beta test kimai.theme.select_type is active, this will tell the selects to refresh
if (select.hasClass('selectpicker')) {
select.selectpicker('refresh');
select.trigger('change.select2');
}
}
}

View File

@@ -35,43 +35,25 @@ export default class KimaiToolbar extends KimaiPlugin {
this._registerSearchButtons(formSelector);
jQuery('body')
// prevent that the dropdown closes, when a form input is changed - eg. a select option was clicked
// prevent that the dropdown closes, when a form input is changed - eg. a select option was clicked
.on('click', formSelector + ' .dropdown-menu', function (event) {
const parent = jQuery(event.target).parents('.bootstrap-select');
if (parent.length === 0) {
event.stopPropagation();
jQuery(".bootstrap-select").removeClass("open");
}
})
// trying to emulate the normal behaviour fo the bootstrap-select, as using its default implementation
// leads to closing the surrounding dropdown menu
.on('click', formSelector + ' .bootstrap-select', function (event) {
const current = jQuery(this);
if (current.hasClass("open")){
jQuery(".bootstrap-select").removeClass("open");
} else {
jQuery(".bootstrap-select").not('.bs-container').each(function(index, element) {
var tmp = jQuery(element);
if (tmp.is(current)) {
return;
}
if (tmp.hasClass('open')) {
tmp.removeClass("open");
// the shown dropdown list will not be closed, using toggle hides all other lists BUT closes the containing search-dropdown
// tmp.find('select.selectpicker').selectpicker('toggle');
}
});
current.addClass("open");
}
event.stopPropagation();
})
// close bootstrap-select if a click happened outside (and none of the other clickHandler were called)
// if the click happened inside a bootstrap-select, we ignore this
.on('click', function(event) {
const parent = jQuery(event.target).parents('.bootstrap-select');
if (parent.length === 0) {
jQuery(".bootstrap-select").removeClass("open");
}
// prevent that a click into the search field will close the dropdown
.on('click', '.select2-search__field', function (event) {
event.stopPropagation();
})
// prevent that the dropdown closes when a optgroup header is clicked
.on('click', '.select2-results__group', function (event) {
event.stopPropagation();
})
// prevent that a click into a daterangepicker will close the dropdown
.on('click', '.daterangepicker', function (event) {
event.stopPropagation();
})
// prevent that clicks in the dropdown elements, but outside of elements will close the dropdown (eg border besides the search field)
.on('click', '.select2-container', function (event) {
event.stopPropagation();
})
;