Add class filter in attribution interface

This commit is contained in:
Claude Paroz 2012-11-13 14:08:34 +01:00
parent e0fd4b42ea
commit e0b60bd371
3 changed files with 46 additions and 6 deletions

View file

@ -21,6 +21,7 @@ urlpatterns = patterns('',
# AJAX/JSON urls
url(r'^section/(?P<pk>\d+)/periods/', 'stages.views.section_periods'),
url(r'^section/(?P<pk>\d+)/classes/', 'stages.views.section_classes'),
url(r'^period/(?P<pk>\d+)/students/', 'stages.views.period_students'),
url(r'^period/(?P<pk>\d+)/corporations/', 'stages.views.period_availabilities'),
# Training params in POST:

View file

@ -51,6 +51,12 @@ def section_periods(request, pk):
periods = [(p.id, p.dates) for p in section.period_set.all()]
return HttpResponse(json.dumps(periods), content_type="application/json")
def section_classes(request, pk):
section = get_object_or_404(Section, pk=pk)
classes = [(k.id, k.name) for k in section.klass_set.all()]
return HttpResponse(json.dumps(classes), content_type="application/json")
def period_students(request, pk):
""" Return all students from period's section, with corresponding Training
if existing (JSON)

View file

@ -9,7 +9,7 @@
select#period_select { width: 16em; }
div#student_choice { float: left; width: 18%; }
select#student_select { width: 100%; }
select#student_select, select#student_filter { width: 100%; }
div#corp_choice { float: right; width: 18%; }
select#corp_select { width: 100%; }
@ -45,24 +45,41 @@ function update_periods(section_id) {
});
}
function update_class_filter(section_id) {
$('#student_filter').empty();
$.getJSON('/section/' + section_id + '/classes/', function(data) {
var sel = $('#student_filter');
sel.append($("<option />").val('').text('Toutes les classes'));
if (data.length > 0) {
$.each(data, function() {
sel.append($("<option />").val(this[1]).text(this[1]));
})
}
});
}
function update_students(period_id) {
$('#student_select').find('option').remove();
$('#student_select').empty();
$('#student_detail').html('').removeClass("filled");
current_student = null;
$('input#valid_training').hide()
if (period_id == '') return;
$.getJSON('/period/' + period_id + '/students/', function(data) {
var sel = $('#student_select');
var options = [];
$.each(data, function() {
if (this.training_id == null) {
sel.append($("<option />").val(this.id).text(this.name + ' (' + this.klass + ')').data('klass', this.klass));
options.push(this);
sel.append($("<option />").val(this.id).text(this.name + ' (' + this.klass + ')')); //.data('klass', this.klass));
}
})
});
// Keep options as data to enable filtering
sel.data('options', options);
});
}
function update_corporations(period_id) {
$('#corp_select').find('option').remove();
$('#corp_select').empty();
$('#corp_detail').html('').removeClass("filled");
current_avail = null;
$('input#valid_training').hide()
@ -83,8 +100,9 @@ function update_trainings(period_id) {
$(document).ready(function() {
$('#section_select').change(function(ev) {
// Update period list when section is modified
$('#period_select').find('option').remove();
$('#period_select').empty();
update_periods($(this).val());
update_class_filter($(this).val());
});
$('#period_select').change(function(ev) {
@ -94,6 +112,19 @@ $(document).ready(function() {
update_trainings($(this).val());
});
$('#student_filter').change(function(ev) {
var sel = $('#student_select');
var options = sel.data('options');
var filter_val = $(this).val();
sel.empty();
$.each(options, function(i) {
var option = options[i];
if (option.klass == filter_val || filter_val == '') {
sel.append($("<option />").val(option.id).text(option.name + ' (' + option.klass + ')'));
}
});
});
$('#student_select').change(function(ev) {
$('#student_detail').load('/student/' + $(this).val() + '/summary/').addClass("filled");
current_student = $(this).val();
@ -130,6 +161,7 @@ $(document).ready(function() {
});
update_periods($('#section_select').val());
update_class_filter($('#section_select').val());
});
var current_student = null;
@ -156,6 +188,7 @@ var current_avail = null;
<div id="student_choice">
<form>
<select id="student_filter" size="1"></select>
<select id="student_select" size="15"></select>
</form>
</div>