Commit fbc452f5 authored by Bryan  BRANCOTTE's avatar Bryan BRANCOTTE
Browse files

using bootstrap-multiselect in more use case thanks to a new django widget...

using bootstrap-multiselect in more use case thanks to a new django widget automating the application of bootstrap-multiselect to select[multiple="multiple"]
parent 6f20d4cb
......@@ -29,6 +29,22 @@ class CharFieldDataList(forms.CharField):
return attrs
class BoostrapSelectMultiple(forms.SelectMultiple):
def __init__(self, allSelectedText, nonSelectedText, SelectedText, attrs=None, *args, **kwargs):
if attrs is not None:
attrs = attrs.copy()
else:
attrs = {}
attrs.update({
"data-all-selected-text": allSelectedText,
"data-non-selected-text": nonSelectedText,
"data-n-selected-text": SelectedText,
"class": "bootstrap-multiselect-applicant",
"style": "display:none;",
})
super().__init__(attrs=attrs,*args, **kwargs)
""" Step 1 : IdForm """
......@@ -324,7 +340,11 @@ class PpiModelForm(ModelForm):
widgets = {
'id': forms.HiddenInput(),
'family': forms.HiddenInput(),
# 'diseases': forms.CheckboxSelectMultiple(),
'diseases': BoostrapSelectMultiple(
allSelectedText=_("All diseases used"),
nonSelectedText=_("No diseases selected"),
SelectedText=_(" diseases selected"),
),
}
def __init__(self, *args, **kwargs):
......
......@@ -196,4 +196,27 @@ function delete_button_clicked(source) {
$(item).find("textarea").prop("disabled",false);
$(item).find("input").prop("disabled",false);
}
}
\ No newline at end of file
}
function create_bootstrap_multiselect_from_applicant(source) {
$(source).multiselect({
allSelectedText: $(source).attr("data-all-selected-text"),
nonSelectedText: $(source).attr("data-non-selected-text"),
nSelectedText: $(source).attr("data-n-selected-text"),
enableFiltering: true,
buttonWidth:'100%',
numberDisplayed: 4,
maxHeight: 600,
templates:{
button: '<button type="button" class="multiselect dropdown-toggle btn btn-secondary btn-default " data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',
filterClearBtn: '<div class="input-group-append"><button class="btn btn-outline-primary multiselect-clear-filter" type="button"><i class="fa fa-times-circle"></i></button></div>',
filter: '<li class="multiselect-item multiselect-filter"><div class="input-group"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon1"><i class="fa fa-search"></i></span></div><input class="form-control multiselect-search" type="text" /></div></li>',
}
}).show();
}
$(document).ready(function(){
$("select[multiple=multiple].bootstrap-multiselect-applicant").each(function(i,e){
create_bootstrap_multiselect_from_applicant(e);
});
});
\ No newline at end of file
{% extends "add.html" %}
{% load i18n %}
{% block extra_js %}
{{block.super}}
<script type="text/javascript">
window.onload = function() {
$("#id_PpiForm-diseases").multiselect({
allSelectedText: 'All diseases used',
nonSelectedText: 'No diseases selected',
enableFiltering: true,
buttonWidth:'100%',
numberDisplayed: 4,
nSelectedText:" diseases selected",
maxHeight: 600,
templates:{
button: '<button type="button" class="multiselect dropdown-toggle btn btn-secondary btn-default " data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',
filterClearBtn: '<div class="input-group-append"><button class="btn btn-outline-primary multiselect-clear-filter" type="button"><i class="fa fa-times-circle"></i></button></div>',
filter: '<li class="multiselect-item multiselect-filter"><div class="input-group"><div class="input-group-prepend"><span class="input-group-text" id="basic-addon1"><i class="fa fa-search"></i></span></div><input class="form-control multiselect-search" type="text" /></div></li>',
}
}).show();
};
</script>
{% endblock extra_js %}
{%block step_desc%}
{%blocktrans%}You have selected a <span style="color:#2d96fa;">{{ complex_type }}</span> that is <span style="color:#2d96fa;">{{ complex_choice }}</span> by the binding of PPI modulator.{%endblocktrans%}
......
......@@ -51,10 +51,11 @@ def bootstrap_core(object):
wrapping_classes = "form-group form-check"
label_classes = "form-check-label"
css_classes.add("form-check-input")
# elif isinstance(field.field.widget, widgets.RadioSelect):
# wrapping_classes = "form-check"
# label_classes = "form-check-label"
# css_classes.add("form-check-input")
elif isinstance(field.field.widget, forms.widgets.SelectMultiple):
# if it is a SelectMultiple, we assume that we will handle it on client side with boostrap-mutliselect
wrapping_classes = "form-group"
attrs["data-label"] = field.label
print_label = False
else:
# usual classes
wrapping_classes = "input_field form-group"
......
......@@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2019-02-15 14:53+0000\n"
"POT-Creation-Date: 2019-02-20 14:24+0000\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
......@@ -58,6 +58,15 @@ msgstr ""
msgid "PPI Familly"
msgstr ""
msgid "All diseases used"
msgstr ""
msgid "No diseases selected"
msgstr ""
msgid " diseases selected"
msgstr ""
msgid "compound_name_label"
msgstr "Compound Name"
......@@ -257,8 +266,8 @@ msgstr ""
msgid "IdForm_desc"
msgstr ""
"Please provide a valid ID for your bibliographic source, either a PubMed ID "
"a patent ID, or a DOI. This ID should correspond to a bibliographic source in its final "
"format. \n"
"a patent ID, or a DOI. This ID should correspond to a bibliographic source "
"in its final format. \n"
"Therefore, PubMed articles in « Just Accepted » format should not be used as "
"a source of data as they are not considered the official version of record."
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment