add "entity selector" widget -- draft
This commit is contained in:
parent
4375aa2ce3
commit
818aa32a07
|
|
@ -43,6 +43,7 @@ class DocumentUploadForm(forms.Form):
|
|||
Field('document_file'),
|
||||
)
|
||||
|
||||
|
||||
@classmethod
|
||||
def pprint_data(self, data):
|
||||
'''
|
||||
|
|
@ -97,6 +98,16 @@ class DocumentDetailsForm(forms.Form):
|
|||
queryset = DocumentUsage.objects.all(),
|
||||
required = True,
|
||||
),
|
||||
|
||||
'entity': forms.CharField(
|
||||
label = _(u'Entité administratrive (code)'),
|
||||
max_length = 64,
|
||||
required = True,
|
||||
help_text = _(u"""
|
||||
Utilisez le sélecteur ci-dessous pour choisir le code de l'entité.
|
||||
""")
|
||||
),
|
||||
|
||||
})
|
||||
|
||||
# crispy
|
||||
|
|
@ -107,12 +118,12 @@ class DocumentDetailsForm(forms.Form):
|
|||
Field('document_pages', css_class='input-mini'),
|
||||
Field('sponsor', css_class='span12'),
|
||||
Field('usage', css_class='span6'),
|
||||
HTML(u"<em>TODO ici: le widget de sélection d'une entité</em>"),
|
||||
Field('entity', template = 'entityselector.html'),
|
||||
)
|
||||
|
||||
def pprint_data(self, data):
|
||||
ret = []
|
||||
fields = [ 'document_title', 'document_pages', 'sponsor', 'usage' ]
|
||||
fields = [ 'document_title', 'document_pages', 'sponsor', 'usage', 'entity', ]
|
||||
for field in fields:
|
||||
ret += [ (self.fields[field].label, u'%s' % data.get(field, '')) ]
|
||||
return ret
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
{% load crispy_forms_field %}
|
||||
{% load sekizai_tags %}
|
||||
|
||||
<div id="div_{{ field.auto_id }}" class="clearfix control-group{% if form_show_errors%}{% if field.errors %} error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
|
||||
{% if field.label %}
|
||||
<label for="{{ field.id_for_label }}" class="control-label {% if field.field.required %}requiredField{% endif %}">
|
||||
{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
|
||||
</label>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="controls" {% if flat_attrs %}{{ flat_attrs|safe }}{% endif %}>
|
||||
{% include 'bootstrap/layout/field_errors_block.html' %}
|
||||
|
||||
<input name="{{ field.html_name }}" value="{{ field.value }}" class="textinput textInput {% if field.field.required %}requiredField{% endif %}" maxlength="64" type="text" id="id_{{ field.auto_id }}">
|
||||
|
||||
|
||||
{% include 'bootstrap/layout/help_text.html' %}
|
||||
</div>
|
||||
|
||||
<div data-input-id="id_{{ field.auto_id }}" class="miller">
|
||||
<div class="miller-column">
|
||||
<span class="miller-row" data-code="DAUPHINE">
|
||||
Université Paris Dauphine
|
||||
</span>
|
||||
<span class="miller-row" data-code="SRI">
|
||||
Service Relation International
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="entity-description-filter"/>
|
||||
|
||||
{% addtoblock "head" %}
|
||||
<style>
|
||||
.miller {
|
||||
border: 1px solid #ccc;
|
||||
height:30em;
|
||||
overflow-x:auto;
|
||||
overflow-y:hidden;
|
||||
white-space:nowrap;
|
||||
position:relative;
|
||||
}
|
||||
.miller-column {
|
||||
height:100%;
|
||||
overflow-y:scroll;
|
||||
overflow-x:hidden;
|
||||
position:absolute;
|
||||
}
|
||||
.miller-row {
|
||||
display:block;
|
||||
white-space:nowrap;
|
||||
clear:both;
|
||||
padding-right:15px;
|
||||
overflow:hidden;
|
||||
text-decoration:none;
|
||||
max-width: 20em;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
-ms-text-overflow: ellipsis;
|
||||
}
|
||||
.miller-selected { background: #08C; }
|
||||
</style>
|
||||
{% endaddtoblock %}
|
||||
|
||||
{% addtoblock "endscripts" %}
|
||||
<script src="{{ STATIC_URL }}livequery/jquery.livequery.js"></script>
|
||||
<script>
|
||||
$('.miller-row').livequery('click', function (event) {
|
||||
$('.miller-selected').removeClass('miller-selected');
|
||||
$(this).addClass('miller-selected');
|
||||
var top_container = $(this).parent().parent();
|
||||
var container = $(this).parent();
|
||||
var id = top_container.attr('data-input-id');
|
||||
var code = $(this).attr('data-code');
|
||||
$(document.getElementById(id)).attr('value', code);
|
||||
var level = $('div', top_container).index(container);
|
||||
$('div:gt(' + level + ')', top_container).remove();
|
||||
var total_width = 0;
|
||||
$('div', top_container).each(function (key, value) {
|
||||
total_width += $(value).width();
|
||||
});
|
||||
var filter_input = $('#entity-description-filter');
|
||||
if (! /^\s*$/.test(filter_input.attr('value'))) {
|
||||
suffix = '?filter=' + filter_input.attr('value');
|
||||
} else {
|
||||
suffix = '';
|
||||
}
|
||||
$.getJSON('/entity/' + code + '/' + suffix, function (data) {
|
||||
if (data.length) {
|
||||
var container = $('<div class="miller-column"></div>').appendTo(top_container);
|
||||
$(container).css({'top': 0, 'left': total_width});
|
||||
$.each(data, function (key, val) {
|
||||
var code = val['code'];
|
||||
var description = val['description'];
|
||||
var node = $('<span class="miller-row" rel="popover" data-title="' + code + '" data-content="' +description+ '"data-code="' + code + '">' + description + '</span>').appendTo(container);
|
||||
});
|
||||
$('span.miller-row[rel=popover]').popover({'placement': 'left'});
|
||||
$(top_container).scrollLeft(total_width);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endaddtoblock %}
|
||||
Reference in New Issue