CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

Allow search and filtering in long multiple choice boxes

Browse Source
This commit is contained in:
Raphael Michel
2021-04-26 11:15:09 +02:00
parent 762fbe0cf6
commit a0a3967ceb
2 changed files with 52 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pretix/static/pretixcontrol/js/ui/main.js
View File

@@ -380,21 +380,44 @@ var form_handlers = function (el) {
if ($(this).find(".choice-options-all").length > 0) { if ($(this).find(".choice-options-all").length > 0) {
return; return;
} }
var $small = $("<small>"); var $menu = $("<div>").addClass("choice-options-menu");
var $a_all = $("<a>").addClass("choice-options-all").attr("href", "#").text(gettext("All")); var $a_all = $("<a>").addClass("choice-options-all").attr("href", "#").text(gettext("All"));
var $a_none = $("<a>").addClass("choice-options-none").attr("href", "#").text(gettext("None")); var $a_none = $("<a>").addClass("choice-options-none").attr("href", "#").text(gettext("None"));
$(this).prepend($small.append($a_all).append(" / ").append($a_none)); var $inp_search = $("<input>").addClass("form-control").attr("type", "text").attr("placeholder", gettext("Search query"));
var $lbl_tgl = $("<div>").addClass("checkbox menu-checkbox");
var $cb_tgl = $("<input>").attr("type", "checkbox").addClass("menu-checkbox");
$lbl_tgl.append($("<label>").append($cb_tgl).append(gettext("Selected only")));
$menu.append($("<span>").append($a_all).append(" / ").append($a_none))
$menu.append($inp_search);
$menu.append($lbl_tgl);
$(this).prepend($menu);
$(this).find(".choice-options-none").click(function (e) { $(this).find(".choice-options-none").click(function (e) {
$(this).closest(".scrolling-multiple-choice").find("input[type=checkbox]").prop("checked", false); $(this).closest(".scrolling-multiple-choice").find("input[type=checkbox]:not(.menu-checkbox)").prop("checked", false);
$cb_tgl.trigger("change");
e.preventDefault(); e.preventDefault();
return false; return false;
}); });
$(this).find(".choice-options-all").click(function (e) { $(this).find(".choice-options-all").click(function (e) {
$(this).closest(".scrolling-multiple-choice").find("input[type=checkbox]").prop("checked", true); $(this).closest(".scrolling-multiple-choice").find("input[type=checkbox]:not(.menu-checkbox)").prop("checked", true);
$cb_tgl.trigger("change");
e.preventDefault(); e.preventDefault();
return false; return false;
}); });
$cb_tgl.on("change", function (e) {
var tgl = $cb_tgl.prop("checked");
$(this).closest(".scrolling-multiple-choice").find("div.checkbox:not(.menu-checkbox)").each(function () {
$(this).toggleClass("sr-only", tgl && !$(this).find("input[type=checkbox]").prop("checked"));
})
});
$inp_search.on("keyup change", function (e) {
var term = $inp_search.val().toLowerCase();
$(this).closest(".scrolling-multiple-choice").find("div.checkbox:not(.menu-checkbox)").each(function () {
$(this).toggleClass("hidden", !$(this).text().toLowerCase().includes(term));
})
})
}); });
el.find('.select2-static').select2({ el.find('.select2-static').select2({

28
src/pretix/static/pretixcontrol/scss/_forms.scss
View File

@@ -387,9 +387,8 @@ div.scrolling-multiple-choice, div.scrolling-choice {
height: 150px; height: 150px;
border: 1px solid $input-border; border: 1px solid $input-border;
border-radius: $input-border-radius; border-radius: $input-border-radius;
padding-left: 15px; padding: 5px 15px;
overflow-y: auto; overflow-y: scroll;
padding-top: 5px;
.radio:first-of-type, .checkbox:first-of-type { .radio:first-of-type, .checkbox:first-of-type {
margin-top: 0; margin-top: 0;
@@ -397,6 +396,29 @@ div.scrolling-multiple-choice, div.scrolling-choice {
&.scrolling-multiple-choice-large { &.scrolling-multiple-choice-large {
height: 350px; height: 350px;
} }
div.choice-options-menu {
display: flex;
flex-direction: row;
align-items: center;
font-size: 12px;
border-bottom: 1px solid $input-border;
margin: 0 -15px;
padding: 0 15px 5px;
span {
display: block;
}
.checkbox {
padding-top: 3px;
}
.form-control {
flex: auto 1 1;
width: auto;
margin: 0 10px 0 10px;
font-size: 12px;
height: auto;
padding: 2px 6px;
}
}
} }
table td > .checkbox { table td > .checkbox {
margin: 0; margin: 0;