From f5627532c7a0b17d94dd3ec8738f554ccd29f8ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= Date: Tue, 12 Apr 2016 15:05:31 +0200 Subject: [PATCH] qualif: redo qualification panel (#10092) --- welco/static/css/style.css | 61 ++++++++++++++++++++++++++++++++++++++ welco/static/js/welco.js | 61 +++++++++++++++++++++++++++++++++++--- 2 files changed, 118 insertions(+), 4 deletions(-) diff --git a/welco/static/css/style.css b/welco/static/css/style.css index d42ac06..5c91919 100644 --- a/welco/static/css/style.css +++ b/welco/static/css/style.css @@ -610,3 +610,64 @@ p.required label::after { border-bottom: 1px dotted #aaa; padding-top: 0.5ex; } + +ul.select-formdata { + margin-top: 0; + width: calc(100% - 6ex); +} + +ul.select-formdata ul { + display: none; + padding: 0; +} + +.cell ul.select-formdata li { + margin: 0; + margin-top: -1px; + list-style: none; + list-style: none; +} + +.cell ul.select-formdata li span { + cursor: pointer; + display: block; + padding: 1ex; +} + +.cell ul.select-formdata.expanded > li { + display: none; +} + +.cell ul.select-formdata.expanded > li.on { + display: block; +} + +.cell ul.select-formdata.expanded > li.on span { + font-weight: bold; +} + +.cell ul.select-formdata.expanded > li.on span::after { + content: "✖"; + position: absolute; + right: 1ex; +} + +ul.select-formdata li.on ul { + display: block; + margin: 0; + padding: 0; +} + +ul.select-formdata li.on ul li { + border-width: 1px 0; + padding: 1ex 1ex; + cursor: pointer; +} + +div.add-formdef-reference button.add { + display: none; +} + +ul.select-formdata li li:hover { + background: #eee; +} diff --git a/welco/static/js/welco.js b/welco/static/js/welco.js index 1642c40..89b05f6 100644 --- a/welco/static/js/welco.js +++ b/welco/static/js/welco.js @@ -1,4 +1,42 @@ $(function() { + $.fn.extend({ + select_2levels: function () { + this.each(function() { + var $orig_select = $(this); + $orig_select.hide(); + var $new_div = $(''); + $new_div.appendTo($orig_select.parent()); + $orig_select.find('optgroup').each(function(idx, optgroup) { + var $new_li = $('
  • ' + $(optgroup).attr('label') + '
    • '); + var $new_sub_ul = $new_li.find('ul'); + $(optgroup).find('option').each(function(idx, option) { + $('
  • ' + $(option).text() + '
    • ').appendTo($new_sub_ul); + }); + $new_li.appendTo($new_div); + }); + $new_div.find('li.cat span').on('welco:click-on', function() { + $(this).parents('ul').find('li').removeClass('on'); + $(this).parent().addClass('on'); + $new_div.addClass('expanded'); + }); + $new_div.find('li.cat span').on('click', function() { + if ($(this).parent().hasClass('on')) { + $(this).parent().removeClass('on'); + $new_div.removeClass('expanded'); + } else { + $(this).parents('ul').find('li').removeClass('on'); + $(this).parent().addClass('on'); + $new_div.addClass('expanded'); + $('.cell.qualif').scrollTop(0); + } + }); + $new_div.find('[data-value]').on('click', function() { + $orig_select.val($(this).data('value')); + $orig_select.parents('div.add-formdef-reference').find('button.add').trigger('click'); + }); + }); + } + }); function refresh_bottom_cells(callback) { var source_type = $('div.source div[data-source-type]').data('source-type'); var source_pk = $('div.source .active[data-source-pk]').data('source-pk'); @@ -10,7 +48,7 @@ $(function() { dataType: 'html', success: function(data) { $(zone).find('> div').replaceWith(data); - $(zone).find('select').select2(); + $(zone).find('select').select_2levels(); $(zone).removeClass('has-page-displayed'); $(zone).removeClass('has-contact-displayed'); $('#create-new-contact').off('click').on('click', window.displayPopup); @@ -45,7 +83,16 @@ $(function() { $('#postit').data('url', $('#postit').data('base-url') + '?mail=' + source_pk); $('#postit').trigger('welco:load-mail-note'); $('#postit').show(); - refresh_bottom_cells(); + refresh_bottom_cells(function() { + var selected_category = $('#category-filter').val(); + if (selected_category) { + $('.qualif ul.select-formdata span').each(function() { + if ($(this).text() == selected_category) { + $(this).trigger('welco:click-on'); + }; + }); + } + }); }); $('.contacts').delegate('button.save', 'click', function() { @@ -79,7 +126,7 @@ $(function() { success: function(data) { var zone = $('.cell.qualif'); $(zone).find('> div').replaceWith(data); - $(zone).find('select').select2(); + $(zone).find('select').select_2levels(); if ($('#id_post_date').length && !$('#id_post_date').val()) { $('div.qualif button.done').attr('disabled', 'disabled'); } else { @@ -105,6 +152,7 @@ $(function() { dataType: 'html', success: function(data) { $('.cell.qualif > div').replaceWith(data); + $('.cell.qualif').find('select').select_2levels(); if ($('#id_post_date').length && !$('#id_post_date').val()) { $('div.qualif button.done').attr('disabled', 'disabled'); } else { @@ -224,7 +272,7 @@ $(function() { }); } - $(zone).find('select').select2(); + $(zone).find('select').select_2levels(); $(zone).removeClass('has-contact-displayed'); $(zone).removeClass('has-page-displayed'); }, @@ -387,6 +435,7 @@ $(function() { }); $('#category-filter').on('change', function() { var selected_category = $(this).val(); + window.sessionStorage.selected_category = selected_category; if (selected_category == '') { $('#source-sidebar li').removeClass('li-visible'); $('#source-sidebar li').show(); @@ -408,6 +457,10 @@ $(function() { } } }); + if (window.sessionStorage.getItem('selected_category') !== null) { + var selected_category = window.sessionStorage.getItem('selected_category'); + $('#category-filter').val(selected_category).trigger('change'); + } } $('.document').delegate('button#take-phoneline', 'click', function() {